javascript - 为什么我无法在这里更改 id demo 的内部 html？

Question

<p id="demo"></p>
<form name="names" action="" method="POST" onsubmit="getinputs(document.getElementByName(firstname),document.getElementByName(secondname))">
  Your name:<br>
  <input type="text" name="firstname"><br>
  Your crush's name:<br>
  <input type="text" name="secondname">
  <input type="submit" value="Submit">
  <br>
</form>


<script>
function getinputs(one, two)
{
document.getElementById('demo').innerHTML=one+two;
}
</script>

我应该如何改变它以使其直观地工作？ 我想通过表单传递这两个值。

Answer 1

通过 id 获取元素并阻止表单提交。见下文:

function getinputs(one, two) {
    event.preventDefault();
    document.getElementById('demo').innerHTML=one+two;
}

<p id="demo"></p>
<form name="names" action="" method="POST" onsubmit="getinputs(document.getElementById('firstname').value,document.getElementById('secondname').value)">
    Your name:<br>
    <input type="text" name="firstname" id="firstname"><br>
    Your crush's name:<br>
    <input type="text" name="secondname" id="secondname">
    <input type="submit" value="Submit">
    <br>
</form>

https://jsfiddle.net/qL0m7px2/