Question

我想创建一个简单的网站（因为我刚刚开始学习javascript），其中将仅包含两个二次方程式列表以及每个方程式的三个数字输入。在这三个输入（a，b和c）中，用户应写出二次方程的系数（例如：x^2+x-2=0-> a：1，b：1，c：-2）。

这是我的HTML外观：

document.getElementById("button").onclick = function() {
  resultScore()
};

function resultScore() {
  var score = 0;
  if (document.getElementByName('coef1a').value = 1) {
    score += 1;
  }
  if (document.getElementByName('coef1b').value = 1) {
    score += 1;
  }
  if (document.getElementByName('coef1c').value = -2) {
    score += 1;
  }
  if (document.getElementByName('coef2a').value = 1 / 2) {
    score += 1;
  }
  if (document.getElementByName('coef2b').value = 4) {
    score += 1;
  }
  if (document.getElementByName('coef2c').value = -2) {
    score += 1;
  }

  alert(score);
}

<ul>
  <li>`x^2+x-2=0`</li>
  a: <input type="number" name="coef1a" min="-10" max="10"> b: <input type="number" name="coef1b" min="-10" max="10"> c: <input type="number" name="coef1c" min="-10" max="10"><br><br><br>
  <li>`1/2x^2+4x-2=0`</li>
  a: <input type="number" name="coef2a" min="-10" max="10"> b: <input type="number" name="coef2b" min="-10" max="10"> c: <input type="number" name="coef2c" min="-10" max="10"><br><br><br>
</ul>

<button type="button" id="button" onclick="alertFunction()">Submit</button>

对于每个正确答案，用户应获得+1分（这样，用户总共可以获得6分）。

单击“提交”按钮后，网站应提醒积分值。问题在于它不会发出任何警报。

Answer 1

您的错误是：

1-您必须写document.getElementsByName('...')[0] == x而不是document.getElementByName('...') = x

2-您必须删除以下代码：

document.getElementById("button").onclick = function() {
  resultScore()
};

3-您必须将按钮的onclick更改为resultScore()

将您的JS代码更改为以下代码：

function resultScore() {
  var score = 0;
  if (document.getElementsByName('coef1a')[0].value == 1) {
    score += 1;
  }
  if (document.getElementsByName('coef1b')[0].value == 1) {
    score += 1;
  }
  if (document.getElementsByName('coef1c')[0].value == -2) {
    score += 1;
  }
  if (document.getElementsByName('coef2a')[0].value == 1 / 2) {
    score += 1;
  }
  if (document.getElementsByName('coef2b')[0].value == 4) {
    score += 1;
  }
  if (document.getElementsByName('coef2c')[0].value == -2) {
    score += 1;
  }

  alert(score);
}

以及您的HTML代码：

<ul>
  <li>`x^2+x-2=0`</li>
  a: <input type="number" name="coef1a" min="-10" max="10"> b: <input type="number" name="coef1b" min="-10" max="10"> c: <input type="number" name="coef1c" min="-10" max="10"><br><br><br>
  <li>`1/2x^2+4x-2=0`</li>
  a: <input type="number" name="coef2a" min="-10" max="10"> b: <input type="number" name="coef2b" min="-10" max="10"> c: <input type="number" name="coef2c" min="-10" max="10"><br><br><br>
</ul>
<button type="button" id="button" onclick="resultScore()">Submit</button>

Answer 2

通过将元素包装成表单，然后构建一个对象来保存所有输入值，您可以以一种更为简单的方式获取值：

let form = document.getElementById("form");
form.onsubmit = ev => {
  // prevent form submit
  ev.preventDefault();
  // Build object to hold form input values 
  let formData = Object.values(form).reduce((obj, field) => {
    obj[field.name] = field.value;
    return obj;
  }, {});
  console.log(formData);
  // Do score result operations
  resultScore(formData);
};

resultScore = formData => {
  var score = 0;
  // Double equal sign for the if conditions below
  if (formData.coef1a == 1) {
    score += 1;
  }
  if (formData.coef1b == 1) {
    score += 1;
  }
  if (formData.coef1c == -2) {
    score += 1;
  }
  if (formData.coef2a == 1 / 2) {
    score += 1;
  }
  if (formData.coef2b == 4) {
    score += 1;
  }
  if (formData.coef2c == -2) {
    score += 1;
  }

  alert(score);
}

<form id='form'>
  <ul>
    <li>`x^2+x-2=0`</li>
    a: <input type="number" name="coef1a" min="-10" max="10"> b: <input type="number" name="coef1b" min="-10" max="10"> c: <input type="number" name="coef1c" min="-10" max="10"><br><br><br>
    <li>`1/2x^2+4x-2=0`</li>
    a: <input type="number" name="coef2a" min="-10" max="10"> b: <input type="number" name="coef2b" min="-10" max="10"> c: <input type="number" name="coef2c" min="-10" max="10"><br><br><br>
  </ul>
  <button type="submit" id="button">Submit</button>
</form>

Answer 3

多个错误：

document.getElementsByName必须是复数（不是document.getElementByName）
document.getElementsByName返回一个NodeList（将其视为数组），因此您必须选择第一个索引
在if语句中，您必须使用==而不是=（==的意思是比较，而=的意思是< strong>将值分配给变量）

document.getElementById("button").onclick = function() {
  resultScore()
};

function resultScore() {
  var score = 0;
  if (document.getElementsByName('coef1a')[0].value == 1) {
    score += 1;
  }
  if (document.getElementsByName('coef1b')[0].value == 1) {
    score += 1;
  }
  if (document.getElementsByName('coef1c')[0].value == -2) {
    score += 1;
  }
  if (document.getElementsByName('coef2a')[0].value == 1 / 2) {
    score += 1;
  }
  if (document.getElementsByName('coef2b')[0].value == 4) {
    score += 1;
  }
  if (document.getElementsByName('coef2c')[0].value == -2) {
    score += 1;
  }

  alert(score);
}

<ul>
  <li>`x^2+x-2=0`</li>
  a: <input type="number" name="coef1a" min="-10" max="10"> b: <input type="number" name="coef1b" min="-10" max="10"> c: <input type="number" name="coef1c" min="-10" max="10"><br><br><br>
  <li>`1/2x^2+4x-2=0`</li>
  a: <input type="number" name="coef2a" min="-10" max="10"> b: <input type="number" name="coef2b" min="-10" max="10"> c: <input type="number" name="coef2c" min="-10" max="10"><br><br><br>
</ul>

<button type="button" id="button">Submit</button>

Answer 4

使用+document.querySelector('input[name="coef1a"]').value === 1使其正常工作。

请注意，+用于将值转换为数字，此外，您还必须使用===进行比较，而不要使用赋值运算符=。

此外，如果要按名称查询输入，请使用querySelector()，该参数以任意选择器作为参数，例如input[name="X"]。

document.getElementById("button").onclick = function() {
  resultScore()
};

function resultScore() {
  var score = 0;
  if (+document.querySelector('input[name="coef1a"]').value === 1) {
    score += 1;
  }
  if (+document.querySelector('input[name="coef1b"]').value === 1) {
    score += 1;
  }
  if (+document.querySelector('input[name="coef1c"]').value === -2) {
    score += 1;
  }
  if (+document.querySelector('input[name="coef2a"]').value === 1 / 2) {
    score += 1;
  }
  if (+document.querySelector('input[name="coef2b"]').value === 4) {
    score += 1;
  }
  if (+document.querySelector('input[name="coef2c"]').value === -2) {
    score += 1;
  }

  alert(score);
}

<ul>
  <li>`x^2+x-2=0`</li>
  a: <input type="number" name="coef1a" min="-10" max="10"> b: <input type="number" name="coef1b" min="-10" max="10"> c: <input type="number" name="coef1c" min="-10" max="10"><br><br><br>
  <li>`1/2x^2+4x-2=0`</li>
  a: <input type="number" name="coef2a" min="-10" max="10"> b: <input type="number" name="coef2b" min="-10" max="10"> c: <input type="number" name="coef2c" min="-10" max="10"><br><br><br>
</ul>

<button type="button" id="button" onclick="alertFunction()">Submit</button>

使用javascript获取数字输入的价值

4 个答案: