<input type="text" value=1 id="num-value">如何用js将value值改变为其他整数并且在前端页面显示出来
时间: 2023-12-19 12:07:36 浏览: 118
可以使用如下的代码来实现:
```html
<input type="text" value="1" id="num-value">
<button onclick="changeValue()">改变值</button>
<p id="display-value"></p>
```
```javascript
function changeValue() {
const numValue = document.getElementById("num-value");
const displayValue = document.getElementById("display-value");
const newValue = Math.floor(Math.random() * 100); // 生成一个0到100之间的随机整数
numValue.value = newValue;
displayValue.innerText = `当前值为:${newValue}`;
}
```
这段代码中,我们首先使用 `document.getElementById` 方法获取了 input 元素和用于显示当前值的 p 元素,然后在 `changeValue` 函数中,生成了一个随机整数,并将该值赋给了 input 元素的 value 属性,同时也将值显示在了 p 元素中。
相关问题
<input type="text" value=“1” id="num-value">如何将value的值获取出来并转换为整数
可以使用JavaScript的parseInt()函数将value的值获取出来并转换为整数,代码如下:
```
let numValue = document.getElementById("num-value").value;
numValue = parseInt(numValue);
console.log(numValue); // 输出为整数
```
这段代码首先通过getElementById()方法获取id为"num-value"的元素,然后使用value属性获取该元素的值。接着使用parseInt()函数将获取到的字符串转换为整数,并将其赋值给numValue变量。最后使用console.log()函数输出结果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算两数之和</title> <script type="text/javascript"> function showSum(){ var n1=document.getElementById("num1").value; var n2=document.getElementById("num2").value; var sum=document.getElementById("sum").value; sum=parseInt(n1)+parseInt(n2); document.getElementById("sum").innerHTML=sum; } </script> </head> <body> 第一个数:<input type="text" id="num1"><br> 第二个数:<input type="text" id="num2"><br><br> <input type="button" value="计算从第一个数到第二个数的和" onclick="showSum()"><br><br> 显示结果:<input type="text" id="sum1"><br> </body> </html>
在您的代码中,有两个错误:
1. 在函数中,您将 `sum` 的值设置为两个输入框中的数字之和,但是您却将 `sum` 的值赋值给了一个文本框 `id` 为 `sum1`,应该将 `sum` 赋值给 `id` 为 `sum` 的文本框。
2. 在 `sum` 的计算中,您将输入框的值通过 `parseInt` 转换为整数,但是在您的代码中,`sum` 的初始值是一个文本框的 `value` 值,因此,您需要将 `sum` 的初始值设置为空字符串,然后在计算中将其转换为整数。
下面是修改后的代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算两数之和</title>
<script type="text/javascript">
function showSum(){
var n1 = parseInt(document.getElementById("num1").value);
var n2 = parseInt(document.getElementById("num2").value);
var sum = "";
sum = n1 + n2;
document.getElementById("sum").value = sum;
}
</script>
</head>
<body>
第一个数:<input type="text" id="num1"><br>
第二个数:<input type="text" id="num2"><br><br>
<input type="button" value="计算从第一个数到第二个数的和" onclick="showSum()"><br><br>
显示结果:<input type="text" id="sum"><br>
</body>
</html>
```
希望可以帮到您!
阅读全文