我正在构建一个简单的乘法形式,该形式可以计算总和并将答案直接呈现给DOM。我正在使用<select>
菜单选择初始数字,并为乘法器选择<input type="number">
。
更改<select>
值时是否可以重新计算答案并将其自动呈现到DOM?该表格目前可以使用,但是用户需要在重新选择初始数字后删除乘数。
我现在在这里:
const selectValIn = document.querySelector(".select-val-in");
const inputValIn = document.querySelector(".input-val-in");
const valOut = document.querySelector(".val-out");
let multiplier = 2;
selectValIn.addEventListener("change", switchValIn);
inputValIn.addEventListener("keyup", convert);
function switchValIn() {
let selectedVal = selectValIn.value;
if (selectedVal === "four") {
multiplier = 4;
} else if (selectedVal === "six") {
multiplier = 6;
} else if (selectedVal === "eight") {
multiplier = 8;
}
}
function convert(e) {
const inputValIn = e.target.value;
const multiplication = inputValIn * multiplier;
valOut.innerText = multiplication;
}
<div class="converter">
<div class="converter-row">
<select class="select-val-in">
<option value="two">2</option>
<option value="four">4</option>
<option value="six">6</option>
<option value="eight">8</option>
</select>
</div>
<div class="converter-row">
<label>Multiplied by:</label>
<input class="input-val-in" type="number" value="0" />
</div>
<div class="converter-row">
<p>Equals: <span class="val-out">0</span></p>
</div>
</div>
这是一个带有工作示例的Codepen:https://codepen.io/abbasarezoo/pen/59776227c017d1c1a3a245a37c305e76
答案 0 :(得分:2)
除了存储更改之外,只要在发生更改时调用计算函数并在那里获取值即可。删除状态使功能更简单,更不易出错。
// Selectors
const selectValIn = document.querySelector(".select-val-in");
const inputValIn = document.querySelector(".input-val-in");
const valOut = document.querySelector(".val-out");
// Calculate
function calculate() {
const value = Number(inputValIn.value);
const multiplier = Number(selectValIn.value);
valOut.innerText = value * multiplier;
}
// Event listeners
selectValIn.addEventListener("change", calculate);
inputValIn.addEventListener("input", calculate);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.converter-row {
margin: 0 0 1rem;
}
<div class="converter">
<div class="converter-row">
<select class="select-val-in">
<option value="2" selected>2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
</div>
<div class="converter-row">
<label>Multiplied by:</label>
<input class="input-val-in" type="number" value="0" />
</div>
<div class="converter-row">
<p>Equals: <span class="val-out">0</span></p>
</div>
</div>
答案 1 :(得分:2)
看下面的例子。还请查看following,以了解change
和input
之间的区别。
const selectValIn = document.querySelector(".select-val-in");
const inputValIn = document.querySelector(".input-val-in");
const valOut = document.querySelector(".val-out");
selectValIn.addEventListener("input", calculate);
inputValIn.addEventListener("input", calculate);
function calculate()
{
valOut.innerText = Number(inputValIn.value) * Number(selectValIn.value);
}
<div class="converter">
<div class="converter-row">
<select class="select-val-in">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
</div>
<div class="converter-row">
<label>Multiplied by:</label>
<input class="input-val-in" type="number" value="0" />
</div>
<div class="converter-row">
<p>Equals: <span class="val-out">0</span></p>
</div>
</div>
还请注意,开关可能更易于阅读:
// Easier to read
switch(selectedVal)
{
case 'two':
multiplier = 2;
break;
case 'four':
multiplier = 4;
break;
case 'six':
multiplier = 6;
break;
case 'eigth':
multiplier = 8;
break;
}
答案 2 :(得分:0)
您是否尝试过存储inputValIn和乘数?这样,您就可以在switchValIn函数内部进行检查,以查看inputValIn是否已经存在,在这种情况下,您可以进行乘法并立即进行渲染。
另一种方法是设置默认的inputValue,这样您就不必执行检查,而是在每次其中一个更改时都运行乘法