JS Output

JavaScript Output

JavaScript can display output using lots of methods:

writing to the console
updating the HTML of a web page
showing popup windows

1. The console

The easiest way to display javascript code by far is using the browser console. Check this tutorial for accessing the Developer Tools.

By getting access to the developers tools of you browser you can use the console tab and check the output of your javascript code.

The code for this is simple:

let greeting = "Hello, world!";
console.log(greeting);

Copy and paste the code above into your console and the output will be: Hello, world!

2. Update the HTML

We have already done this quite a few times in our examples by selecting the element and updating its contents.

For example below we update the content of the button when it gets clicked.

The same thing applies to any element that is selected/targetted to be updated using JavaScript.

The most efficient way to update the contents of an element are using .innerHTML and .innerText

The syntax is as per below:

document.getElementById("target element").innerHTML

document.getElementById("target element").innerText

With Javascript you can also output style changes to an element.

The way to sdo this is by selecting the element and applying the .style as per below:

document.getElementById("target element").style.color ="red";

document.getElementById("target element").style.backgroundcolor ="blue";

               
                
<button id="target" onclick="myFunction()">Click me</button>
<script>

function myFunction() {
var text = "I'm Clicked!";
document.getElementById("target").innerText = text;
}

</script>

3. Showing popup windows

JavaScript also provides the option to display content in pop-ups. The code to triger the pop-up is below:

     
      
<button id="target" onclick="mypopup()">Click me</button>
<script>
function mypopup(){ 
let answer = "California";
window.alert("The answer is " + answer);
}
</script>