将输入从 prompt() 传输到文本字段

Question

我有一个 HTML 页面，当按下开始按钮时，会出现一个提示框，提示用户输入他/她的姓名。当用户输入他/她的名字并确认输入时，它会出现在黑色的盒子上（如代码所示），文本颜色为白色。我不确定如何将值从 prompt() “转移”到文本字段。我知道输入字段的值默认为空。

function myFunction() {
  var person = prompt("Please enter your name");
  if (person != null) {
       person = document.getElementById(input).value;
  }
}

#input{
  width: 15%;
  padding: 50px 50px;
  margin: 8px 0;
  background-color: #191818;
  color: white;

}

#input1 {
  width: 15%;
  padding: 50px 50px;
  margin: 8px 0;
  background-color: #7C7878;
  color: white;

}

.btnEdit{
    width: 30px;
    margin: 5px;
    display: block;

    font-weight:bold;  
    text-align:center;
    font-size:10px;   
    line-height:15px;
}

<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input"/>
<button id="swap" value="Swap"  class="btnEdit">--></button>
<button id="swap1" value="Swap1"  class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1"/>

预期的输出将是用户在提示中输入他/她的姓名，并在确认后，他/她的姓名将以黑色和白色文本颜色出现在文本字段中。

Answer 1

你只需要交换它。

person = document.getElementById(input).value;

以上是错误的。应该是：

document.getElementById("input").value = person;

您还需要更新"input"。这不是一个常数。

function myFunction() {
  var person = prompt("Please enter your name");
  if (person != null) {
    document.getElementById("input").value = person;
  }
}

#input {
  width: 15%;
  padding: 50px 50px;
  margin: 8px 0;
  background-color: #191818;
  color: white;
}

#input1 {
  width: 15%;
  padding: 50px 50px;
  margin: 8px 0;
  background-color: #7C7878;
  color: white;
}

.btnEdit {
  width: 30px;
  margin: 5px;
  display: block;
  font-weight: bold;
  text-align: center;
  font-size: 10px;
  line-height: 15px;
}

<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input" />
<button id="swap" value="Swap" class="btnEdit">--></button>
<button id="swap1" value="Swap1" class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1" />

Answer 2

function myFunction() {
  var person = prompt("Please enter your name");
  if (person != null) {
        document.getElementById('input').value = person;
  }
}

#input{
  width: 15%;
  padding: 50px 50px;
  margin: 8px 0;
  background-color: #191818;
  color: white;

}

#input1 {
  width: 15%;
  padding: 50px 50px;
  margin: 8px 0;
  background-color: #7C7878;
  color: white;

}

.btnEdit{
    width: 30px;
    margin: 5px;
    display: block;

    font-weight:bold;  
    text-align:center;
    font-size:10px;   
    line-height:15px;
}

<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input"/>
<button id="swap" value="Swap"  class="btnEdit">--></button>
<button id="swap1" value="Swap1"  class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1"/>