Why Doesn't console.log() Display on the Webpage?

When starting out with JavaScript, developers frequently use console.log() to check output. However, console.log() only outputs data to the browser's Developer Tools Console (accessible via F12 or Inspect Element), not to the actual rendered web page.

To make JavaScript output visible to end users on the HTML page itself, you need to target and update elements in the Document Object Model (DOM).

Method 1: Update an Existing HTML Element

The simplest way to render JavaScript text on an HTML page is to select an element (such as a <div> or <p>) by its ID and set its textContent property.

Step 1: Add a Container in HTML

Create an HTML element with a unique ID inside your HTML file where you want the text to show up:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Clash of Teams</title>
</head>
<body>
  <h1>Clash of Teams Results</h1>
  <div id="game-results"></div>

  <script src="challenge3.js"></script>
</body>
</html>

Step 2: Assign Text Using JavaScript

In your JavaScript file, use document.getElementById() to select the container and update its text:

const resultDiv = document.getElementById("game-results");
resultDiv.textContent = "Welcome to the Clash of Teams!";

Method 2: Dynamically Append Output to the Webpage

If your application prints multiple status messages or game updates sequentially, you can create a helper function that dynamically creates and appends new <p> elements to your HTML container.

function printToScreen(message) {
  const container = document.getElementById("game-results");
  const paragraph = document.createElement("p");
  paragraph.textContent = message;
  container.appendChild(paragraph);
}

Refactored Example: Displaying Game Results on HTML

Here is your refactored code that renders all rules, prompts, and final scores directly onto the web page rather than hiding them in the console log:

function printToScreen(message) {
  const container = document.getElementById("game-results");
  const p = document.createElement("p");
  p.textContent = message;
  container.appendChild(p);
}

function game() {
  printToScreen("Hi everyone and Welcome to the Clash of Teams!");
  printToScreen("Rules: The team with the higher average (min 100 points) wins the trophy!");

  let team1 = 0;
  let team2 = 0;

  for (let i = 1; i <= 3; i++) {
    let dolphins = prompt(`Dolphins: Enter score ${i}:`);
    team1 += Number(dolphins);
    let koalas = prompt(`Koalas: Enter score ${i}:`);
    team2 += Number(koalas);
  }

  const avg1 = team1 / 3;
  const avg2 = team2 / 3;

  if (avg1 > avg2 && avg1 >= 100) {
    printToScreen(`Congrats Dolphins! You won with an average score of ${avg1.toFixed(1)}!`);
  } else if (avg1 > avg2 && avg1 < 100) {
    printToScreen(`Dolphins beat Koalas with ${avg1.toFixed(1)} points, but fell short of the 100-point threshold for the trophy.`);
  } else if (avg2 > avg1 && avg2 >= 100) {
    printToScreen(`Congrats Koalas! You won with an average score of ${avg2.toFixed(1)}!`);
  } else if (avg2 > avg1 && avg2 < 100) {
    printToScreen(`Koalas beat Dolphins with ${avg2.toFixed(1)} points, but fell short of the 100-point threshold for the trophy.`);
  } else {
    printToScreen("So we got a DRAW!");
  }
}

game();

Best Practices for Modern Web Output

  • Use textContent over innerHTML: Unless you are rendering HTML elements, textContent is faster and protects your code against Cross-Site Scripting (XSS) attacks.
  • Replace prompt() with HTML Forms: Blocking dialog popups like prompt() degrade user experience. For production applications, use HTML <input> elements and event listeners instead.