OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter AspiringCoder
  • Start date Start date
A

AspiringCoder

Guest
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

Code:
<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:

Code:
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:

Code:
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

<p>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</p>
<pre><code><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>
</code></pre>
<p>Then for Javascript:</p>
<pre><code>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;
}
}
</code></pre>
<p>The answer won't display in the p tag</p>
<p>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.</p>
<p>I've also tried using:</p>
<pre><code>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;
}
}
</code></pre>
<p>Nothing works</p>
 

Latest posts

Top