javascript - 如何获取javascript的输入值
问题描述
我目前正在尝试获取用户选择作为其号码的输入字段的值,但由于某种原因我无法做到。
我已经尝试将其设置为 id,然后进行操作document.getElementById("testing").value
,但没有成功。
这是我当前的代码:
<section class="generate">
<div class="container">
<h3>Generate a number between </h3>
<form>
First number
<input id="testing" type="number" name="firstnumber" value="First number">
<br> Second number
<input type="number" name="secondnumber" value="Second number">
<br>
<input type="submit" value="Generate random number">
<script>
var secondNumber = document.getElementById('testing').value
var randomNumber = Math.floor(Math.random() * secondNumber);
console.log(randomNumber);
console.log(secondNumber);
</script>
</form>
</div>
</section>
解决方案
您需要在事件侦听器中运行代码,而不是在页面首次加载时运行。
document.querySelector("form").addEventListener("submit", function(e) {
e.preventDefault(); // prevent form from really submitting
var secondNumber = document.getElementById('testing').value
var randomNumber = Math.floor(Math.random() * secondNumber);
console.log(randomNumber);
console.log(secondNumber);
});
<section class="generate">
<div class="container">
<h3>Generate a number between </h3>
<form>
First number
<input id="testing" type="number" name="firstnumber" value="First number">
<br> Second number
<input type="number" name="secondnumber" value="Second number">
<br>
<input type="submit" value="Generate random number">
</form>
</div>
</section>
推荐阅读
- navigation - Pepper 机器人的移动速度不会超过最低速度
- c# - WCF 在作为服务托管时的行为不同
- python - 错误不可散列类型:'list' 当计数元素在可视代码上有格式列表时
- java - 原因:java.lang.NullPointerException:尝试在空对象引用上调用虚拟方法“boolean java.lang.String.isEmpty()”
- javascript - {消息:“不支持的操作数类型”,异常:“错误”,…} F12 /Network
- oracle - 'rownum' vs 'fetch next',各自的优缺点是什么?
- c# - 根据包含的字符串获取列表,然后按列表中相同的数值对其进行排序
- javascript - Vue向@click事件添加条件
- python - 如何修复阶乘打印程序中的错误?
- python - 使用 umongo 批量插入/更新