innerHTML 在第一次单击按钮时有效，但在第二次单击时无效

Question

这是我的单位转换器应用程序的代码。 它在第一次单击时起作用，但如果您更改数字并再次单击“转换”按钮，它就不起作用。 谁能告诉我我哪里出错了？

 const inputEl = document.querySelector(".input-el") const btnEl = document.querySelector(".btn-el") let group1 = document.querySelector(".group-1") let group2 = document.querySelector(".group-2") let group3 = document.querySelector(".group-3") btnEl.addEventListener('click', function convert() { let num = inputEl.value; const metres = inputEl.value * 3.281 const feet = inputEl.value / 3.281 const litres = inputEl.value * 0.264 const gallon = inputEl.value / 0.264 const kilograms = inputEl.value * 2.204 const pounds = inputEl.value / 2.204 group1 = group1.innerHTML += `<p> ${num} meters = ${metres.toFixed(3)} | ${num} = ${feet.toFixed(3)} </p>` group2 = group2.innerHTML += `<p> ${inputEl.value} litres = ${litres.toFixed(3)} | ${inputEl.value} = ${gallon.toFixed(3)} </p>` group3 = group3.innerHTML += `<p> ${inputEl.value} kilograms = ${kilograms.toFixed(3)} | ${inputEl.value} = ${pounds.toFixed(3)} </p>` })

 body { margin: 0; box-sizing: border-box } #container { width: 550px; height: 729px; background: #1F2937; } .header { width: 550px; height: 285px; background: #6943FF; } .main { width: 550px; height: 444px; background: #1F2937; color: white; } h1 { font-family: 'Inter'; font-style: normal; font-weight: 800; font-size: 28px; line-height: 38px; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; padding-top: 33px; } input { font-family: 'Inter'; font-style: normal; font-weight: 800; font-size: 58px; line-height: 24px; text-align: center; color: #FFFFFF; border: 2px solid #B295FF; border-radius: 5px; background: #6943FF; width: 117px; height: 73px; display: block; margin: auto; margin-bottom: 25px; margin-top: px; } button { width: 117px; height: 42px; display: block; margin: auto; } div.main>* { width: 500px; height: 109px; background: #273549; border-radius: 5px 0px 0px 0px; background: #273549; margin: 24px 25px; } h2 { color: #CCC1FF; text-align: center; font-family: 'Inter'; font-style: normal; font-weight: 600; font-size: 20px; line-height: 20px; padding-top: 31px; } p { font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: #FFFFFF; }

 <div id="container"> <div class="header"> <h1>Metric/Imperial Unit Conversion</h1> <input class="input-el" type="number"> <button class="btn-el">convert</button> </div> <div class="main"> <div class="group-1"> <h2>Length (Meter/Feet)</h2> </div> <div class="group-2"> <h2>Volume (Liters/Gallons)</h2> </div> <div class="group-3"> <h2>Mass (Kilograms/Pounds)</h2> </div> </div> </div>

Answer 1

您正在使用加法赋值运算符+= ，因此字符串被添加到变量中，而不是被替换/覆盖。 请改用相等运算符= 。

此外，您不能像这样定义变量的值，只需在变量上直接使用innerHTML即可：

group1.innerHTML = `<p> ${num} meters = ${metres.toFixed(3)} | ${num} = ${feet.toFixed(3)} </p>`

 const inputEl = document.querySelector(".input-el") const btnEl = document.querySelector(".btn-el") let group1 = document.querySelector(".group-1") let group2 = document.querySelector(".group-2") let group3 = document.querySelector(".group-3") btnEl.addEventListener('click', function convert() { let num = inputEl.value; const metres = inputEl.value * 3.281 const feet = inputEl.value / 3.281 const litres = inputEl.value * 0.264 const gallon = inputEl.value / 0.264 const kilograms = inputEl.value * 2.204 const pounds = inputEl.value / 2.204 group1.innerHTML = `<p> ${num} meters = ${metres.toFixed(3)} | ${num} = ${feet.toFixed(3)} </p>` group2.innerHTML = `<p> ${inputEl.value} litres = ${litres.toFixed(3)} | ${inputEl.value} = ${gallon.toFixed(3)} </p>` group3.innerHTML = `<p> ${inputEl.value} kilograms = ${kilograms.toFixed(3)} | ${inputEl.value} = ${pounds.toFixed(3)} </p>` })

 body { margin: 0; box-sizing: border-box } #container { width: 550px; height: 729px; background: #1F2937; } .header { width: 550px; height: 285px; background: #6943FF; } .main { width: 550px; height: 444px; background: #1F2937; color: white; } h1 { font-family: 'Inter'; font-style: normal; font-weight: 800; font-size: 28px; line-height: 38px; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; padding-top: 33px; } input { font-family: 'Inter'; font-style: normal; font-weight: 800; font-size: 58px; line-height: 24px; text-align: center; color: #FFFFFF; border: 2px solid #B295FF; border-radius: 5px; background: #6943FF; width: 117px; height: 73px; display: block; margin: auto; margin-bottom: 25px; margin-top: px; } button { width: 117px; height: 42px; display: block; margin: auto; } div.main>* { width: 500px; height: 109px; background: #273549; border-radius: 5px 0px 0px 0px; background: #273549; margin: 24px 25px; } h2 { color: #CCC1FF; text-align: center; font-family: 'Inter'; font-style: normal; font-weight: 600; font-size: 20px; line-height: 20px; padding-top: 31px; } p { font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: #FFFFFF; }

 <div id="container"> <div class="header"> <h1>Metric/Imperial Unit Conversion</h1> <input class="input-el" type="number"> <button class="btn-el">convert</button> </div> <div class="main"> <div class="group-1"> <h2>Length (Meter/Feet)</h2> </div> <div class="group-2"> <h2>Volume (Liters/Gallons)</h2> </div> <div class="group-3"> <h2>Mass (Kilograms/Pounds)</h2> </div> </div> </div>

Answer 2

将 group div Selectors(group1,group2,group3) 分配给 innerHtml 的返回值将导致覆盖选择器。 我在 group1、group2、group3 div 中添加了 p 标签并使用 querySelector 选择了它们。所以 onClick 监听器只会将段落的 innerHTML 更新为正确的值

 const inputEl = document.querySelector(".input-el") const btnEl = document.querySelector(".btn-el") let group1Paragraph = document.querySelector(".group-1 p") let group2Paragraph = document.querySelector(".group-2 p") let group3Paragraph = document.querySelector(".group-3 p") btnEl.addEventListener('click', function convert() { let num = inputEl.value; console.log('num',num) const metres = inputEl.value * 3.281 const feet = inputEl.value / 3.281 const litres = inputEl.value * 0.264 const gallon = inputEl.value / 0.264 const kilograms = inputEl.value * 2.204 const pounds = inputEl.value / 2.204 group1Paragraph.innerHTML = `<p> ${num} meters = ${metres.toFixed(3)} | ${num} = ${feet.toFixed(3)} </p>` group2Paragraph.innerHTML = `<p> ${inputEl.value} litres = ${litres.toFixed(3)} | ${inputEl.value} = ${gallon.toFixed(3)} </p>` group3Paragraph.innerHTML = `<p> ${inputEl.value} kilograms = ${kilograms.toFixed(3)} | ${inputEl.value} = ${pounds.toFixed(3)} </p>` })

 body { margin: 0; box-sizing: border-box } #container { width: 550px; height: 729px; background: #1F2937; } .header { width: 550px; height: 285px; background: #6943FF; } .main { width: 550px; height: 444px; background: #1F2937; color: white; } h1 { font-family: 'Inter'; font-style: normal; font-weight: 800; font-size: 28px; line-height: 38px; text-align: center; letter-spacing: -0.03em; color: #FFFFFF; padding-top: 33px; } input { font-family: 'Inter'; font-style: normal; font-weight: 800; font-size: 58px; line-height: 24px; text-align: center; color: #FFFFFF; border: 2px solid #B295FF; border-radius: 5px; background: #6943FF; width: 117px; height: 73px; display: block; margin: auto; margin-bottom: 25px; margin-top: px; } button { width: 117px; height: 42px; display: block; margin: auto; } div.main > * { width: 500px; height: 109px; background: #273549; border-radius: 5px 0px 0px 0px; background: #273549; margin: 24px 25px; } h2 { color: #CCC1FF; text-align: center; font-family: 'Inter'; font-style: normal; font-weight: 600; font-size: 20px; line-height: 20px; padding-top: 31px; } p { font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: #FFFFFF; }

 <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div id="container"> <div class="header"> <h1>Metric/Imperial Unit Conversion</h1> <input class="input-el" type="number"> <button class="btn-el">convert</button> </div> <div class="main"> <div class="group-1"> <h2>Length (Meter/Feet)</h2> <p></p> </div> <div class="group-2"> <h2>Volume (Liters/Gallons)</h2> <p></p> </div> <div class="group-3"> <h2>Mass (Kilograms/Pounds)</h2> <p></p> </div> </div> </div> </body> </html>