Question

我有一个HTML和JS代码，将提示用户输入两个值，然后系统将显示两个数字的副产品。 Javascript代码如下：

function multiplyBy()
{
    num1 = document.getElementById("firstNumber").value; 
    num2 = document.getElementById("multiplier").value;
    document.getElementById("result").innerHTML = num1 * num2;
}

现在，对于num1输入，用户可以选择是要手动输入数字还是使用允许其单击特定值的滑块。滑块是使用html构建的，在这里我将滑块代码发布到JS中：

num1的Javascript代码为：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;         
num1 = slider.value;

我的问题是，我应该添加什么代码以允许用户在手动输入或使用滑块之间进行选择？现在，我只能为num1分配一个输入。

预先感谢您的帮助！

Answer 1

每当用户更改滑块或手动输入时，使用change事件侦听器更新num1。

function save_num1() {
  document.getElementById("demo").innerHTML = this.value;
}
document.getElementById("myRange").addEventListener("change", save_num1);
document.getElementById("firstNumber").addEventListener("change", save_num1);

<input type="range" id="myRange" min="0" max="100">
<br>
<input type="number" id="firstNumber" min="0" max="100">
<br> Result: <span id="demo"></span>

如何在JavaScript中为输入分配两个条件？

1 个答案: