QR Code generator only generate the QR code for the first input-CodePudding

I am new to stackoverflow and i wanted to create a QR code generator that translate the 2 inputs into a QR code, however the code only translate the first input into a QR code and does not include the information for the second input. I also try using querySelectorAll but it doesnt change anything I hope good sirs would be so kind to teach me where I'm wrong at.

here is the code for HTML

  <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>PracticeQRProgram</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div >
        <header>
            <h1>QR CODE GENERATOR</h1>
        </header>
          <div >
              <input  type="text" spellcheck="false" placeholder="Enter Full Name">
              <input  type="text" spellcheck="false" placeholder="Enter ID no.">
            <button>Submit</button>
          </div>
          
        <div >
          <img src="" alt="qr-code">
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

here is the code for javascript

var wrapper = document.querySelector(".wrapper"),
qrInput = wrapper.querySelector(".form input");
generateBtn = wrapper.querySelector(".form button");
qrImg = wrapper.querySelector(".qr-code img");
let preValue;
generateBtn.addEventListener("click", () => {
    let qrValue = qrInput.value.trim();
    if(!qrValue || preValue === qrValue) return;
    preValue = qrValue;
    generateBtn.innerText = "Submitting...";
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
    qrImg.addEventListener("load", () => {
        wrapper.classList.add("active");
        generateBtn.innerText = "QR Code";
    });
});
qrInput.addEventListener("keyup", () => {
    if(!qrInput.value.trim()) {
        wrapper.classList.remove("active");
        preValue = "";
    }
});

and here is for the style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  min-height: 100vh;
  align-items: center;
  background-image: url("ICpEP.jpg");
  background-color: #cccccc;
  justify-content: center;
}
.wrapper{
  height: 650px;
  max-width: 410px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 0;
  transition: height 0.2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.wrapper.active{
  height: 650px;
}
header h1{
  font-size: 21px;
  font-weight: 500;
}
header p{
  margin-top: 5px;
  color: #575757;
  font-size: 16px;
}
.wrapper .form{
  margin: 20px 0 25px;
}
.form :where(input, button){
  width: 100%;
  height: 55px;
  border: none;
  outline: none;
  border-radius: 5px;
  transition: 0.1s ease;
}
.form input{
  font-size: 18px;
  padding: 0 17px;
  border: 1px solid #999;
}
.form input :focus{
  box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.form input::placeholder{
  color: #999;
}
 .form button{
  color: #fff;
  cursor: pointer;
  margin-top: 20px;
  font-size: 17px;
  background: #3498DB;
}
.qr-code{
  opacity: 0;
  display: flex;
  padding: 33px 0;
  border-radius: 5px;
  align-items: center;
  pointer-events: none;
  justify-content: center;
  border: 1px solid #ccc;
}
.wrapper.active .qr-code{
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s 0.05s ease;
}
.qr-code img{
  width: 170px;
}
@media (max-width: 430px){
  .wrapper{
    height: 650px;
    padding: 16px 20px;
  }
  .wrapper.active{
    height: 650px;
  }
  header p{
    color: #696969;
  }
  .form :where(input, button){
    height: 52px;
  }
  .qr-code img{
    width: 160px;
  }

}

CodePudding user response：

In this line:

qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;

You are only sending the qrValue to the api. You will have to read and send both the id and name info to the api if you want both encoded.

That being said I would adjust the code a bit to make it easier to reason about.

Firstly I would add unique id's to each of the input elements eg:

<input id="name-input"  type="text" spellcheck="false" placeholder="Enter Full Name">
<input id="id-input"  type="text" spellcheck="false" placeholder="Enter ID no.">

Next I would select these elements directly using:

var qrNameInput = document.getElementById("name-input");
var qrIdInput = document.getElementById("id-input");

Then in your event listener I would read these values:

var name = qrNameInput.value.trim();
var id = qrIdInput.value.trim();

And finally send both of these information on to the api:

qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data="name:${name},id:${id}"`;

CodePudding user response：

querySelectorAll() is the way to do this !

but you have to change some of your code, because it returns a NodeList, so you'll have to iterate on the result to find your values, like this :

const qrInputs = wrapper.querySelectorAll('.form input');

generateBtn.addEventListener('click', () => {
  let qrValue = getQrValue();
  //[...]
}

function getQrValue() {
  //To use array function, you have to cast the NodeList to an Array
  const inputsArray = Array.from(qrInputs)
  //getting an array of values from inputs
  const values = inputsArray.map((input) => input.value);
  // return a signle string with all values separated with '_'
  return values.join('_');
}

And with qrInput.addEventListener("keyup", [...]) you can just set the listener on the form instead (events are bubbling up)