时间戳

首页 > 解决方案 > 如何为Javascript中的输入分配两个条件？

javascript - 如何为Javascript中的输入分配两个条件？

问题描述

我有一个 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。

在此先感谢您的帮助！

标签： javascripthtml

解决方案

每当用户更改滑块或手动输入时，使用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>

推荐阅读