[英]How to add text content (after button click) to a webpage using JavaScript?
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>
我正在 JavaScript 中構建 BMI 計算器，它最終將能夠同時采用公制和英制值。 單擊“公制”按鈕時，我希望文本“以米為單位輸入您的身高”出現在高度輸入字段上方。 這是 JavaScript：
基本上，我的問題是這樣的：
document.querySelector('.enterheight').textContent =
'Enter your height in metres.';
目前，當單擊指標按鈕時，什么也沒有發生。 控制台說 document.querySelector(...) 是 null，我不明白為什么。 是因為 HTML 是一個空字符串，還是我在這里遺漏了什么？
想想看，HTML 中不存在 DOM 元素。 這就是為什么JS無法訪問的原因。 您需要創建一個元素
<p class="enterHeight"></p>
在 HTML 文件中，然后您可以訪問它..
我希望它對你有用...
如何在javascript中點擊按鈕重新加載網頁，但重新加載調用函數后
[英]How to reload a webpage with a button click in javascript but after reload calling a function
您如何使用javascript查找並單擊網頁上的特定按鈕？
[英]How do you find and click on a specific button on a webpage using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.