Multiply output by inputs-CodePudding

I'm trying to create a list based off of 2 input fields. The first input will be a name and the second an integer.

What I'm trying to achieve is having the name displayed multiplied by the amount of the input integer. I have got the name to display based off the input, but have been unable to have it displayed multiple times based on the input integer.

Here's an example image of what I'm looking to achieve

<html>
<head>
<style>
input {
    display: block;
}
#msgs {
    margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>

<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
    document.getElementById("add").onclick = function() {
  var text = document.getElementById("name").value; 
  var div = document.createElement("div");
  div.textContent = text;
  document.getElementById("list").appendChild(div);
  document.getElementById("name").value = ""; // clear the value
}
</script>
</html>

Fiddle: https://jsfiddle.net/grnct2yz/

CodePudding user response：

<html>
<head>
<style>
input {
    display: block;
}
#msgs {
    margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>

<body>
<input type="text" value="Michael" id="name" />
<input type="number" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
    document.getElementById("add").onclick = function() {
  var text = document.getElementById("name").value; 
  for(let i = 0; i < document.getElementById("count").value; i  ) {
    var div = document.createElement("div");
    div.textContent = text;
    document.getElementById("list").appendChild(div);
  }
  document.getElementById("name").value = ""; // clear the value
}
</script>
</html>

I have added a loop and changed the input type to number so we are sure that it's going to insert a number in the loop. Is this what you wanted?

What the code I added does is cycling a number of times equal to the number inputted and then executing the code you wrote. for loops work this way:

you set an initial statement that is executed at the beginning of the loop, only once (let i = 0 sets a new iterable variable i),
then you set a condition that is checked before every iteration of the loop to make it run (i < document.getElementById("count").value checks that it executes up to and not more than X times, where X is the number inputted),
then you set an operation to be executed at the end of each loop (i increments the value of i by one).

CodePudding user response：

Here is another way of doing it:

const name=document.getElementById("name"),
     count=document.getElementById("count"),
     list=document.getElementById("list");
     
document.getElementById("add").onclick = function() {
  list.insertAdjacentHTML("beforeend",[...Array( count.value)].map(s=>`<div>${name.value}</div>`).join(""))
  name.value = ""; // clear the value
}

<input type="text" value="Michael" id="name" /><br>
<input type="text" value="5" id="count" /><br>
<input type="button" value="add to list" id="add" />
<div id="list"> </div>

CodePudding user response：

Just your Improved code based on your needs we can achieve this in many ways.

 <html>
    <head>
    <style>
    input {
      display: block;
    }
    #msgs {
      margin-bottom: 24px;
    }
    </style>
    <meta charset="utf-8">
    <title>Test</title>
    </head>

    <body>
     <input type="text" value="Michael" id="name" />
     <input type="text" value="5" id="count" />
     <input type="button" value="add to list" id="add" />
     <div id="list"> </div>
     <script>
      document.getElementById("add").onclick = function() {
       var text = document.getElementById("name").value;
       var count = document.getElementById("count").value;
       if (parseInt(count) != 'NaN') {
         var list = document.getElementById("list");
         while (list.firstChild) {
           list.removeChild(list.firstChild);
         }
         count = parseInt(count);
         for (var i = 0; i < count; i  ) {
           var div = document.createElement("div");
           div.textContent = text;
           document.getElementById("list").appendChild(div);
         }
      }
  
     }
    </script>
    </body>

    </html>