CODEWITHSUNDEEP
javascripthtml
Alan Stephen
Alan Stephen

Reputation: 23

Input number object for every Element

How to add an Input-Number-Object for Every Element. Each product should have an Input Number Object so we could decide how many products is needed.

For example: I need to buy a product and i want 5 of it. So i just scroll through the Number box and Choose the number of products is need.

JavaScript

function myFunction() {
  var x = document.getElementById("myNumber").value;
  document.getElementById("demo").innerHTML = x;
}

Html

<input type="number" id="myNumber" value="1">

Upvotes: 0

Views: 124

Answers (2)

Hack Dawg
Hack Dawg

Reputation: 108

function myFunction() {
  var x1 = document.getElementById("itm1").value;
  var x2 = document.getElementById("itm2").value;
  var x3 = document.getElementById("itm3").value;
  var x4 = document.getElementById("itm4").value;
  var x5 = document.getElementById("itm5").value;

alert("Item1: "+ x1 +"\nItem2: " +x2+ "\nItem3: " +x3+ "\nItem4: " +x4+ "\nItem5: " +x5)
}
<label>Item 1 </label><input type="number" id="itm1" value="1"><br/>
<label>Item 2 </label><input type="number" id="itm2" value="1"><br/>
<label>Item 3 </label><input type="number" id="itm3" value="1"><br/>
<label>Item 4 </label><input type="number" id="itm4" value="1"><br/>
<label>Item 5 </label><input type="number" id="itm5" value="1"><br/>
<input type="button" value="Submit" onclick="myFunction()"/>

Upvotes: 0

Aksen P
Aksen P

Reputation: 4599

Perhaps you ask for this:

Via JQuery:

$(function(){
      $('#demo').text($('#sel').val());
      $('#sel').change(function(){
         $('#demo').text($(this).val());
      });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
</select>

<div id="demo" style="font-weight: bold"><div>

Via JavaScript: 

myF();
function myF(){
  var a = document.getElementById("sel").value;
  document.getElementById("demo").innerHTML = a;
}
    <select id="sel" onchange="myF();">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
    </select>

    <div id="demo" style="font-weight: bold"><div>

Upvotes: 1

Related Questions