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

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 >
    <h1>Metric/Imperial Unit Conversion</h1>
    <input  type="number">
    <button >convert</button>
  </div>
  <div >
    <div >
      <h2>Length (Meter/Feet)</h2>
    </div>
    <div >
      <h2>Volume (Liters/Gallons)</h2>
    </div>
    <div >
      <h2>Mass (Kilograms/Pounds)</h2>
    </div>
  </div>
</div>

CodePudding user response：

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 >
    <h1>Metric/Imperial Unit Conversion</h1>
    <input  type="number">
    <button >convert</button>
  </div>
  <div >
    <div >
      <h2>Length (Meter/Feet)</h2>
    </div>
    <div >
      <h2>Volume (Liters/Gallons)</h2>
    </div>
    <div >
      <h2>Mass (Kilograms/Pounds)</h2>
    </div>
  </div>
</div>

CodePudding user response：

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 >
           <h1>Metric/Imperial Unit Conversion</h1> 
           <input  type="number">
           <button >convert</button>
        </div>
        <div >  
            <div >
                <h2>Length (Meter/Feet)</h2>
                <p></p>
            </div>
            <div >
                <h2>Volume (Liters/Gallons)</h2>
                <p></p>
            </div>
            <div >
                <h2>Mass (Kilograms/Pounds)</h2>
                <p></p>
            </div>
        </div>
    </div>
    </body>
</html>