gpt4 book ai didi

javascript - 无法让javascript输出简单的加法结果

转载 作者:行者123 更新时间:2023-11-28 17:35:10 25 4
gpt4 key购买 nike

HTML 文件

   <body>
<form name = 'add'>
<div name = 'add'>
<input type="number" id='num1'>
<input type="number" id='num2'>
<button name = 'sum' onclick="add()"></button>
<input type="number" id="sum">

</div>

</form>

<script src='additionkindergarden.js'></script>

JS文件

var num1,num2,sum;

function add(){
num1 = document.getElementById('num1').value;
num2 = document.getElementById('num2').value;
sum = num1 + num2;
return document.getElementById('sum').value = sum;
}

刚刚开始编码,没有使用 Udemy。我在这里被困了大约5个小时。我知道它很简单,但我无法让我的 JS 与我的 HTML 连接。我在 HTML 中的 num1 和 num2 位置输入数字,当我按下按钮时,屏幕会快速刷新,num1 和 num 2 中的数字消失,最后一个输入框留空。请帮助我的第一个独奏等级。 1 个编码项目。

最佳答案

问题是点击按钮会调用add()还可以提交表单,这将重新加载页面。删除<form>标签,你不需要它们。接下来,输入 .value是文本,即使您有 type="number" ,这意味着您需要转num1num2首先转化为数字。我还将 sum 元素变成了 <p>鉴于它是用于输出,而不是输入。

var num1, num2, sum;

function add() {
var num1String = document.getElementById('num1').value;
var num2String = document.getElementById('num2').value;
num1 = Number(num1String);
num2 = Number(num2String);
sum = num1 + num2;
document.getElementById('sum').innerHTML = sum;
}
<input type="number" id='num1'>
<input type="number" id='num2'>
<button onclick="add()">Add</button>
<p id="sum"></p>

关于javascript - 无法让javascript输出简单的加法结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49299434/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com