On button click get values of many input fields with the same class and paste it inside different input fields with the same class using javascript

Question

Based on a previous question of mine here i have three input fields with the same css class price-input and i want after clicking on the button with the id set-price-btn to fill them with the input value displayed at the bottom of each input field using pure JavaScript.

The problem is that everytime i click the button, the variable videosize returns undefined. What I am doing wrong ?

var setpricebtn = document.getElementById("set-price-btn");

setpricebtn.addEventListener("click", () => {

var priceinputs = document.querySelectorAll("price-input");
var videosize = document.querySelectorAll("video-file-size").value;

for (var i = 0; i < videosize.value; i++) {
  var savedprice = videosize[i].value;
  priceinputs[i].value = savedprice;
}

  });

.toolbar {
width:100%;
overflow:hidden;
margin-bottom:30px;
}

.btn {
width:auto;
display:inline-block;
padding:10px;
text-align:center;
background:#e8e8e8;
cursor:pointer;
border-radius:4px;
font-weight:bold;
font-size:12px;
}



 Set price to all fields

user_10140124 · Answer

Few things to remember:

This is how you query based on classes when using querySelector. You have to use a ..

videosize will be a live collection of HTML Nodes.



var priceinputs = document.querySelectorAll(".price-input"); 
var videosize = document.querySelectorAll(".video-file-size");

for (var i = 0; i < videosize.length; i++) {
  var savedprice = videosize[i].value;
  priceinputs[i].value = savedprice;
}

  });

user_11251938 · Answer

You cannot do var videosize = document.querySelectorAll("video-file-size").value because document.querySelectorAll("video-file-size") returns a NodeList. See docs.

And either you use document.querySelectorAll(".video-file-size") or document.getElementsByClassName('video-file-size').

On button click get values of many input fields with the same class and paste it inside different input fields with the same class using javascript

2 Answers