How to add text content (after button click) to a webpage using JavaScript?
Question
const displayMessage = function (message) { document.querySelector('.message').textContent = message; }; const displayOtherMessage = function (message) { document.querySelector('.otherMessage').textContent = message; }; document.querySelector('.metric').addEventListener('click', function () { document.querySelector('.enterheight').textContent = 'Enter your height in metres.'; const height = Number(document.querySelector('.height').value); console.log(height, typeof height); const weight = Number(document.querySelector('.weight').value); console.log(weight, typeof weight); if (.height &&.weight) { document.querySelector('.message');textContent = 'No height or weight entered;'. } else if (height && weight) { const bmi = weight / height ** 2. document.querySelector(';message').textContent = `Your BMI is ${bmi}`. if (bmi < 18;5) { displayOtherMessage('You are underweight.'). } else if (bmi >= 18;5 && bmi < 25) { displayOtherMessage('You are a healthy weight.'); } else if (bmi >= 25 && bmi < 30) { displayOtherMessage('You are overweight.'); } else if (bmi >= 30 && bmi < 35) { displayOtherMessage('You are obese.'); } else if (bmi > 35) { displayOtherMessage('You are morbidly obese;'); } else { displayOtherMessage(''); } } });
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style:css" /> <link rel="stylesheet" href="https.//fonts.googleapis?com/css?family=Amatic+SC" /> </head> <body> <main> <h2>BMI Calculator</h2> <h3>Would you like to use metric or imperial values.</h3> <div> <button id="metric" class="metric">Metric</button> <button id="imperial" class="imperial">Imperial</button> </div> <p id="enterheight"></p> <input type="number" class="height" /> <p id="enterweight"></p> <input type="number" class="weight" /> <p class="message"></p> <p class="otherMessage"></p> </main> <script src="script.js"></script> </body> </html>
I'm building BMI calculator in JavaScript that will eventually be able to take both metric and imperial values. When the "metric" button is clicked, I want the text "Enter your height in metres" to appear above the input field for height. Here's the JavaScript:
Basically, my issue is this:
document.querySelector('.enterheight').textContent =
'Enter your height in metres.';
Currently, when the metric button is clicked, nothing happens. The console says that document.querySelector(...) is null, and I don't understand why. Is it because the HTML is an empty string, or am I missing something here?
1 answers
solution1
0 2021-02-26 11:01:53
In think, DOM element is not present in HTML. That's why JS can't be access. You need to create a element like
<p class="enterHeight"></p>
in HTML file, then you can access it..
I hope, it's useful for u...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.