如何从 html 数字输入创建一个数字变量？

Question

我希望将两个输入元素（在本例中为滑块，但在未来的开发中可能会变成数字输入）的值相加并将它们相加。我希望这个值显示在控制台上（同样，在稍后阶段，这将是使用 .innerHTML 的网站的完整部分）。

下面的代码将这两个值视为文本字符串，并将它们并排放置 (50+50=5050)。我试过使用 .parseInt 而不是 .value 但这没有帮助。

我的HTML代码：

    <input id="FirstSliderElement" type="range" min="0" max="100">
    <input id="SecondSliderElement" type="range" min="0" max="100">
    <button onclick="thisIsMyFunction()">Show in Console</button>

我的JS代码：

    var sliderOne = document.getElementById("FirstSliderElement");
    var sliderTwo = document.getElementById("SecondSliderElement");

    function thisIsMyFunction() {
        console.log("Slider One:", sliderOne.value)
        console.log("Slider Two:", sliderTwo.value)
        console.log("Sum:", sliderTwo.value + sliderOne.value)
}

Answer 1

您可以使用 number 函数来实现

来自 MDN - “Number 构造函数包含用于处理数字的常量和方法。可以使用 Number() 函数将其他类型的值转换为数字”

"作为函数使用时，Number(value)将字符串或其他值转换为Number类型，如果值无法转换，则returns NaN"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

 var sliderOne = document.getElementById("FirstSliderElement");
    var sliderTwo = document.getElementById("SecondSliderElement");

    function thisIsMyFunction() {
        const value1 = Number(sliderOne.value);
        const value2 = Number(sliderTwo.value);
        console.log("Slider One:", value1)
        console.log("Slider Two:", value2)
        console.log("Sum:", value1 + value2)
}

<input id="FirstSliderElement" type="number" min="0" max="100">
<input id="SecondSliderElement" type="number" min="0" max="100">
<button onclick="thisIsMyFunction()">Show in Console</button>

Answer 2

只需使用 parseInt() 解析任何包含数字的字符串；

document.getElementById("FirstSliderElement") 上也没有 .parseInt。

parseInt() is a global function.

检查这个以查看代码的输出

var sliderOne = document.getElementById("FirstSliderElement");
var sliderTwo = document.getElementById("SecondSliderElement");

function thisIsMyFunction() {
  var silderOneValue = parseInt(sliderOne.value);
  var silderTwoValue = parseInt(sliderTwo.value);

  console.log("Slider One:", silderOneValue)
  console.log("Slider Two:", silderTwoValue)
  console.log("Sum:", silderOneValue + silderTwoValue)
}

<input id="FirstSliderElement" type="number" min="0" max="100">
<input id="SecondSliderElement" type="number" min="0" max="100">
<button onclick="thisIsMyFunction()">Show in Console</button>

Answer 3

无需解析即可使用.valueAsNumber

var sliderOne = document.getElementById("FirstSliderElement");
var sliderTwo = document.getElementById("SecondSliderElement");

function thisIsMyFunction() {
  console.log("Slider One:", sliderOne.value);
  console.log("Slider Two:", sliderTwo.value);
  var sum = sliderTwo.valueAsNumber + sliderOne.valueAsNumber;
  console.log("Sum:", sum);
}

<input id="FirstSliderElement" type="range" min="0" max="100">
<input id="SecondSliderElement" type="range" min="0" max="100">
<button onclick="thisIsMyFunction()">Show in Console</button>

Answer 4

    var sliderOne = document.getElementById("FirstSliderElement");
    var sliderTwo = document.getElementById("SecondSliderElement");

    function thisIsMyFunction() {
      let one1 = sliderOne.value ;
      one1 = parseInt(one1);
      let  two2 = sliderTwo.value ;
      two2 = parseInt(two2);
      
      console.log(two2 + one1 );
      
      // Your Code 
      
        console.log("Slider One:", sliderOne.value)
        console.log("Slider Two:", sliderTwo.value)
        console.log("Sum:", parseInt(sliderTwo.value) +
                            parseInt(sliderOne.value)
                   )
}

<input id="FirstSliderElement" type="range" min="0" max="100">
    <input id="SecondSliderElement" type="range" min="0" max="100">
    <button onclick="thisIsMyFunction()">Show in Console</button>

Answer 5

    let sliderOne = document.querySelector("#FirstSliderElement");
    let sliderTwo = document.querySelector("#SecondSliderElement");
    let btn = document.querySelector("#btn")

    btn.addEventListener("click", thisIsMyFunction)

    function thisIsMyFunction(){
        let sliderOneValue = parseInt(sliderOne.value);


        let sliderTwoValue = parseInt(sliderTwo.value);

        let add = sliderOneValue + sliderTwoValue;
        console.log(add)
    }

如何从 html 数字输入创建一个数字变量？

How do I make a number variable from a html number input?

html

javascript

integer

sum