Question

function storename() {
  playereen = document.getElementById('p1').value;
  playertwee = document.getElementById('p2').value;
  console.log(playereen);
  console.log(playertwee);
  document.getElementById("outputa").innerHTML = playereen;
}

我试图将表单中的输入存储到变量中，然后使其出现在屏幕上。它有此错误：无法将属性'innerHTML'设置为null

html

<div class="scoreboard-wrapper">
  <h1 class="scoreboard-titel">Scoreboard</h1>
  <p>Player 1 - </p><div id="outputa"></div>
  <p>Player 2 - </p><div id="outputb"></div>
  <button onclick="start()" id="startbtn">Start</button>
</div>

表格：

`<form id="form1">
        <p id="logintekst">Enter your names!</p>
        <input id="p1" class="form" type="text" placeholder="Player 1">
        <input id="p2" class="form" type="text" placeholder="Player 2">
        <a onclick="storename()" href="memory.html"><div onclick="storename()" id="submit-btn">Submit</div></a>
    </form>

`

Answer 1

编辑：检查this矮杆。它向您展示了如何做自己想做的事情。 Index.html：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
    <form id="form1">
       <p id="logintekst">Enter your names!</p>
       <input id="p1" class="form" type="text" placeholder="Player 1">
       <input id="p2" class="form" type="text" placeholder="Player 2">
        <a onclick="this.href='memory.html? 
        playereen='+document.getElementById('p1').value" 
         href=''>Submit</a>
    </form>

    </body>
</html>

memory.html：

<!DOCTYPE html>
<html>
    <head>
       <script>
           function getname() {
               var url = new URL(window.location.href);
               var playereen= url.searchParams.get("playereen");
               document.getElementById("outputa").innerHTML = 
               playereen;
           }

       </script>
       <title>Page Title</title>

    </head>
    <body onload="getname()">

        <div class="scoreboard-wrapper">
            <h1 class="scoreboard-titel">Scoreboard</h1>
            <p>Player 1 - </p><div id="outputa"></div>
            <p>Player 2 - </p><div id="outputb"></div>
            <button onclick="start()" id="startbtn">Start</button>
       </div>
    </body>

Answer 2

似乎可以正常工作

function storename() {
playereen = document.getElementById('p1').value;
playertwee = document.getElementById('p2').value;
console.log(playereen);
console.log(playertwee);
document.getElementById("outputa").innerHTML = playereen;
  }
  

document.getElementById('btn').addEventListener('click', () => {
storename();
});

<div class="scoreboard-wrapper">
  <h1 class="scoreboard-titel">Scoreboard</h1>
  <p>Player 1 - </p><div id="outputa"></div>
  <p>Player 2 - </p><div id="outputb"></div>
  <button onclick="start()" id="startbtn">Start</button>
</div>

<button id="btn">Print</button>

<form id="form1">
        <p id="logintekst">Enter your names!</p>
        <input id="p1" class="form" type="text" placeholder="Player 1">
        <input id="p2" class="form" type="text" placeholder="Player 2">
        <a onclick="storename()"><div onclick="storename()" id="submit-btn">Submit</div></a>
    </form>

Javascript innerhtml问题=

2 个答案: