从输入计算

Question

我开始研究 javascript 中的 DOM，我想创建一个程序，将输入的两个数字相加并显示出来。

我想知道我应该使用哪些功能，哪些功能我没有使用更好。

这是我的（很简单）html代码：

let warp = document.getElementById('warp');
let first = document.getElementById('first').value;
let one = parseInt(first);
let second = document.getElementById('second').value;
let two = parseInt(second);

let res = document.getElementById('res');

//res.addEventListener('click', calcul);
//res.onclick(calcul);

let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);

function calcul(first, second) {
  console.log(one + two);
  event.preventDefault();
}

<!DOCTYPE html>
</head>

<body>
  <div id="warp">
    <form>
      <input id="first" type="number">first number</input>
      <input id="second" type="number">second number</input>
      <input id="res" type="submit" value="Envoyer" onclick="calcul()" />
    </form>
    <div>
</body>

Answer 1

这行得通。您只需要在 calcul() 函数本身中根据它们的 id 调用这些值。

let warp = document.getElementById('warp');
let res = document.getElementById('res');
let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);

function calcul() {
  let first = document.getElementById('first').value;
  let one = parseInt(first);
  let second = document.getElementById('second').value;
  let two = parseInt(second);
  if(isNaN(one) || isNaN(two)){
    event.preventDefault();
    return
  }
  console.log(one + two);
  event.preventDefault();
}

<!DOCTYPE html>
</head>

<body>
  <div id="warp">
    <form>
      <input id="first" type="number">first number</input>
      <input id="second" type="number">second number</input>
      <input id="res" type="submit" value="Envoyer" onclick="calcul()" />
    </form>
    <div>
</body>

Answer 2

let answerElemenet = document.createElement("h1");
// You can create a h1 element to display your answer after calculating it
document.body.appendChild(answerElemenet);

// Inside the calculate Function you get the values of input one and two
// and then you store the sum value in a variable and just change your 
// answerElement to have the innerHTML value of the finalSum Variable
function calculate(){
    let valueOne = parseFloat(document.getElementById('first').value);
    let valueTwo = parseFloat(document.getElementById('second').value);

    let finalSum = valueOne + valueTwo;

    answerElemenet.innerHTML = finalSum;
}

Answer 3

欢迎使用 Whosebug！

我复制了你的答案并做了一些小改动。以下是您可以做得更好的简要说明和解释：

如果您不打算更改这些引用，请使用 const 而不是 let。还要尝试将输入元素与其值分开。对输入的引用可能不会改变，但它们的值肯定会改变。

const warp = document.getElementById('warp');
const first = document.getElementById('first');
const second = document.getElementById('second');
const res = document.getElementById('res');

在计算输入值时，您通常希望它们尽可能新鲜，因此不是在脚本开头就保存输入值，而是在需要时在 calcul() 函数中获取它们。

您还需要某种验证。这里我们尝试将输入转换为数字，如果不可能则设置为零：

function calcul() {
  event.preventDefault();
  const one = parseFloat(first.value) || 0;
  const two = parseFloat(second.value) || 0;
  console.log(one + two);
}

向 DOM 元素添加事件处理程序的首选方法是使用 event API。因此，要调用 calcul() 函数，您可以使用您评论过的行：

res.addEventListener('click', calcul);

这也意味着您应该从 DOM 中删除 onClick 属性。此外，输入不能有 children:

<input id="first" type="number" />
<input id="second" type="number" />
<input id="res" type="submit" value="Envoyer"/>

全部看起来像这样：

const warp = document.getElementById('warp');
const first = document.getElementById('first');
const second = document.getElementById('second');
const res = document.getElementById('res');

function calcul() {
  event.preventDefault();
  const one = parseFloat(first.value) || 0;
  const two = parseFloat(second.value) || 0;
  console.log(one + two);
}

res.addEventListener('click', calcul);


let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);

<!DOCTYPE html>
</head>

<body>
  <div id="warp">
    <form>
      <input id="first" type="number" />
      <input id="second" type="number" />
      <input id="res" type="submit" value="Envoyer"/>
    </form>
    <div>
</body>

保持良好的工作，永远不要停止提问！

从输入计算

calculating from an input

javascript

dom

frontend