Html Question posted in
Some basic documentation can be found here.

How to add a value to a HTML tag like a p tag using javascript

I’m trying to create a BMI calculator that displays a user’s BMI once they submit their height and weight. But the results won’t display in the p tag.
Here’s the code:
HTML

<form>
<label for="height">Please input your height:</label>
<input id="height" type="text" name="" value="" placeholder="height">
<label for="weight">Please input your weight:</label>
<input id="weight" type="text" name="" value="" placeholder="weight">
<button onclick="BMIcalc()" type="button" name="button">Submit</button>
</form>
<h3>Your BMI is: </h3>
<p class="result"></p>

Then for Javascript:

let myHeight = document.getElementById("height");
let myWeight = document.getElementById("weight");
let answer = document.getElementsByClassName("result");

function BMIcalc() {
  if (myHeight.value === "" || myWeight.value === "") {
    alert("Please fill in your height and weight!");
  } else{
    const BMI = myWeight.value / myHeight.value**2;
    answer.value = BMI;
  }
}

The answer won’t display in the p tag

However, if I use console.log(), the result is displayed meaning the function is working correctly. But I need to be able to show the result to the user.

I’ve also tried using:

let myHeight = document.getElementById("height");

let myWeight = document.getElementById("weight");

function BMIcalc() {
  if (myHeight.value === "" || myWeight.value === "") {
    alert("Please fill in your height and weight!");
  } else{
    const BMI = myWeight.value / myHeight.value**2;
    const answer = BMI;
    document.getElementsByClassName("result").innerText = answer;
  }
}

Nothing works

Tags:

2

Answers


  1. 0

    I think you need to change from:

    document.getElementsByClassName("result").innerText = answer;

    to:

    document.getElementById("result").innerText = answer;

    And later in your HTML change to:

    <p id="result"></p>

    But, if you really need class in your p tag, use in your JS:

    document.querySelector(".result").innerText = answer;

    See the docs about querySelector.

    Login or Signup to reply.
  2. 0
    • getElementsByClassName returns a collection (similar to an array) of elements that match the specified class name. It does not return a single element directly.
    • You’re trying to set innerHTML directly on the collection returned by getElementsByClassName. This won’t work because getElementsByClassName returns multiple elements, and you need to update each one individually.

    You need some refactoring in your code:

    • To solve this, you should iterate over the collection returned by getElementsByClassName and update the innerHTML of each element individually.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <input type="number" id="height" name="height" placeholder="Enter your height" />
    <input type="number" id="weight" name="weight" placeholder="Enter your weight" />
    <button type="button" value="submit" onclick="bmiCalc()">Submit</button>
    <p class="result">Pending....</p>
    <script>
        function bmiCalc(){
            let myheight = document.getElementById("height").value;
            let myweight = document.getElementById("weight").value;

            if(myheight === "" || myweight === ""){
                alert("Please Enter number........")
            }
            else{
                let ans = myheight / myweight ** 2;
                let resultElements = document.getElementsByClassName("result");
                for (let i = 0; i < resultElements.length; i++) {
                    resultElements[i].innerHTML = "The BMI is: " + ans;
                }
            }

            document.getElementById("height").value = "";
            document.getElementById("weight").value = "";
        }
    </script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search