Looking for some help.
I am looking for a quick and easy guide on how to get what my JS is outputting into some html.
I have a tech test to do and I haven’t learned how to combine JS and HTML yet. I do have an input box in my HTML that I somehow managed to get into my JS which is then doing calculations.
So for instance I am asking for a number and I am then dividing it by something already defined. I have got it to print to the console and print correctly but I need it to print to the webpage, ie a p tag. I’m currently only using codepen at the moment as it works on that, I dont know if that’s makes a different. Ultimately I would like to put it on Github.
Does anyone have any tutorials on how to quickly do this, or if possibly can someone show me how it is done? Perhaps not on my test as I really would like to do that myself.
Firstly, welcome to the forums.
While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://freecodecamp.org.
With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).
It is pretty typical on here for people to share a codepen / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.
Please provide some example of what you’ve tried and I’m sure you’ll get more help.
Happy coding 
Hi @ArielLeslie Im not new to fCC but thanks for the welcome.
I would rather not share what I have already done as I want to really work on this myself so that is why I am asking for some tutorials that might be helpful.
I am already a fair bit through the beta JS section and still haven’t stumbled upon how to link JS to HTML but perhaps I am not in far enough.
I have my P tag and then in the JS sections I have my function and it is printing to the console.log but instead of that I need it to print to this P tag.
Is this for a techincal question for a job?
The concept that you’re looking for is “DOM manipulation”. Searching for variations on “javascript dom manipulation” will get you documentation and tutorials for different ways to do this. You’ll have to decide what is most appropriate for what you’re trying to do.
Free Code Camp has lessons of jQuery for DOM manipulation (both in the curriculum at freecodecamp.org and the beta site). If your test doesn’t allow you to use jQuery, then you’ll want to look up how to select and modify elements in “vanilla” js.
Basically it takes two stages:
- in the JavaScript, select the HTML element you want to modify. You can use various kinds of selector such as
document.getElementById(). This gives you a reference to the DOM element.
- Then, update the
innerText property of the DOM element
In vanilla JavaScript you would select the HTML element you want on the page and target it with whatever JavaScript output you wanted. The basis of this is document.getElementById() (there are others but this one is specific to IDs).
For example
//If I wanted to see the output of this function for a specific number, say 3
const timesFour = function(number){
return number * 4
}
//where 'target' is the HTML id I am changing
document.getElementById('target').innerHTML = timesFour(3);
//you can use innerHTML or innerText depending on what you're trying to do
If you are using jQuery, you can use the jQuery selector to simplify the operation:
const timesFour = function(number){
return number * 4;
}
//where target is the ID, if it was a class we would use . instead of #
$('#target').html(timesFour(3));
Make sure to include a script tag for jQuery in your HTML file or it will not work.
Its a technical test for a very very junior role with the change for on the job training. They know what I have previously done and gave me the test just to see how I coped. I have a few days to complete it so I really want to learn how to do this part of it.
Edit:
I did it! I am actually so happy and proud that I managed to get this. I honestly didn’t think I would, it doesn’t looks like much but thats tomorrows task.
Thanks for the suggestions everyone, I ended up using w3school after it was suggested to me by my cities fCC group.
Happy Coding everyone!