how to increase range input using JS-CodePudding

I want to increase my range bar according to input field values.

If someone gives them some value in input field 1 then give some value in input field 2 and in one variable both values get added and then its value push in the <input type="range" id="ran"/>.

function ra() {
  var a = document.getElementById('ss');
  if (a.style.display == "none") {
    a.style.display = "block";

  } else if (a.style.display == "block") {
    a.style.display = "none";
  }

}

function ss() {
  var x = parseInt(document.getElementById("myText").value); //value of input field 1 store in x

  var c = parseInt(document.getElementById("my").value) //value of input field 2 store in c


  var r = parseInt(console.log(x   c)) //Now both values are added

  //Now I want to push the value of *r* in type="range"

  var test = r;
  document.getElementById("ran").value = test;
}

body {
  background-color: black;
  color: white;
}

<form>
  <input type="checkbox" name="ABA" onclick="ra()" value="Applied Behaviour Analysis">Applied Behaviour Analysis
  <div id="ss" style="display: none;">
    <input type="number" id="myText" value="">
    <input type="number" id="my" value="">
    <button onclick="ss()">calculate</button>
    <input type="range" id="ran" value="0">
  </div>
</form>

CodePudding user response：

First, console.log() will not return the value.

Second, according to MDN

The value won't be less than min. The default is 0. The value won't be greater than max. The default is 100.

If you don't set the max value. Input 1 Input 2 over 100 will be set to 100 in input.value

function ra() {
  var a = document.getElementById('ss');
  if (a.style.display == "none") {
    a.style.display = "block";

  } else if (a.style.display == "block") {
    a.style.display = "none";
  }

}

function ss() {
  var x = parseInt(document.getElementById("myText").value); //value of input field 1 store in x

  var c = parseInt(document.getElementById("my").value) //value of input field 2 store in c


  var r = x   c //Now both values are added

  console.log(r)

  //Now I want to push the value of *r* in type="range"

  var test = r;
  document.getElementById("ran").value = test;
}

body {
  background-color: black;
  color: white;
}

<form>
  <input type="checkbox" name="ABA" onclick="ra()" value="Applied Behaviour Analysis">Applied Behaviour Analysis
  <div id="ss" style="display: none;">
    <input type="number" id="myText" value="">
    <input type="number" id="my" value="">
    <button onclick="ss()">calculate</button>
    <input type="range" id="ran" value="0">
  </div>
</form>

CodePudding user response：

You want to prevent the default effect of ss() function here. We achived this by returning false from function and using return ss() in onclick.

More info: How to prevent default event handling in an onclick method?

function ra() {
  var a = document.getElementById('ss');
  if (a.style.display == "none") {
    a.style.display = "block";

  } else if (a.style.display == "block") {
    a.style.display = "none";
  }

}

function ss() {
  var x = parseInt(document.getElementById("myText").value); //value of input field 1 store in x
  var c = parseInt(document.getElementById("my").value) //value of input field 2 store in c
  document.getElementById("ran").value = x   c;

  return false;
}

function updateRange() {
  var x = document.getElementById("myText").value;
  var y = document.getElementById("my").value;
  document.getElementById("ran").value = x   y;
}

body {
  background-color: black;
  color: white;
}

<form>
  <input type="checkbox" name="ABA" onclick="ra()" value="Applied Behaviour Analysis">Applied Behaviour Analysis
  <div id="ss" style="display: none;">
    <input onchange="updateRange()" type="number" id="myText" value="">
    <input onchange="updateRange()" type="number" id="my" value="">
    <button onclick="return ss()">calculate</button>
    <input type="range" id="ran" value="0">
  </div>
</form>

CodePudding user response：

Here is one approach; in this approach I've removed the use of unnecessary JavaScript (show/hide functionality can be easily achieved in CSS with this structure), I've wrapped most of the <input> elements in <label> elements to make them more-easily understood by the user, and easier to focus by clicking/touching the text as well as the <input> itself.

I've also set the <button> element's type attribute to button, which means it won't attempt to submit the form when it's clicked.

Further, as I pointed out in the comment to your question there is no return value from console.log(), so JavaScript receives undefined which is then passed to parseInt() and converts that to NaN; which isn't an available value in the range <input>.

Further guidance and explanatory comments in the code, below:

// use meaningful names in development (they can be easily minimised
// during the build process):
function calculate() {
  // using document.querySelectorAll() get all elements matching the CSS
  // selector passed to the function; we use the Array-literal and spread
  // syntax to convert the NodeList to an Array, and then pass that Array
  // of nodes to Array.prototype.map() to return a new Array based on that
  // initial Array of Nodes:
  const values =  [...document.querySelectorAll('input[type=number]')].map(
    // here we pass the <input> element-node into the Arrow function, and
    // return the parsed value of the current <input> node in base 10:
    (input) => parseInt(input.value, 10)
  ),
    // here we reduce the Array of entered values using Array.prototype.reduce()
    // to create a sum of the values in that Array of values:
    sum = values.reduce((acc, curr) => {return acc   curr.value}, 0);

    // here we retrieve the range input via its 'id', and set its value
    // to the sum:
    document.querySelector('#ran').value = sum;
}

// retrieving the <button> element, and using EventTarget.addEventListener() to
// bind the calculate() function as the event-handler for the 'click' event:
document.querySelector('button').addEventListener('click', calculate);

body {
  background-color: black;
  box-sizing: border-box;
  color: white;
  font: 1rem / 1.5;
  margin: 0;
  padding: 0;
}

#ss {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1em auto;
  width: 90vw;
}

/* we select the #ss element that is the immediately-adjacent
   sibling of the <input> with the name-attribute set to 'ABA'
   and style it as 'display: none' */
input[name=ABA]   #ss {
  display: none;
}

/* here we select the #ss element that is the immediately-adjacent
   sibling of the <input> with the name-attribute set to 'ABA'
   when that <input> is checked, to make #ss visible when the <input>
   is checked, and hidden when not-checked: */
input[name=ABA]:checked   #ss {
  display: flex;
}

<form>
  <input type="checkbox" name="ABA" value="Applied Behaviour Analysis">Applied Behaviour Analysis
  <div id="ss">
    <label>
    Input One value: 
    <input type="number" id="myText" value="">
    </label>

    <label>
    Input Two value: 
    <input type="number" id="my" value="">
    </label>
    <button type="button">calculate</button>

    <label>
    Calculated Value:
    <input type="range" id="ran" value="0">
    </label>
  </div>
</form>

References: