innerHTML works on first button click but doesn't work on second click

Question

This is the code for my unit converter app. It works on the first click but if you change the number and click the 'convert' button again, it doesn't work. Can anyone please tell me where I am going wrong please?

 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

You're using the addition assignment operator += , so the string is added to the variable, not replaced/overwritten. Use the equality operator = instead.

Also, you can't define the variables' value like this, just use the innerHTML directly on the variable instead:

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

Assigning group div Selectors(group1,group2,group3) to the return value of innerHtml would result in overwriting the selectors. I added the p tags inside the group1,group2,group3 div & selected them using the querySelector.So then the onClick listener would just update the paragraph's innerHTML to the correct value

 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>