为什么 JavaScript 代码没有改变值？

Question

我刚回到Web Dev（学习另一种语言之后），我刚想到一个项目，一个文本键盘（当鼠标点击所需的字母时，它会将其添加到一个字符串中），但是JS 代码无法正常工作。我只是看看我是否可以更改 <p> 标签的值，但它没有改变，或者我应该说出现。

a{
    color: inherit;
    text-decoration: none;
}
*{
    margin:0;
    padding:0;
}
#heading{
    color: white;
    text-align: center;
    font-size: 24px;
    font-weight: 420 bold;
    font-family: sans-serif;
    text-shadow: 2px 2px red;
    margin-right: 10px;
    margin-top: 20px;
}
#description{
    color: green;
    text-align: center;
    font-size: 19px;
    font-weight: 69 bold;
    font-family: serif;
    text-shadow: 1px 1px white;
    margin-right: 10px;
    margin-top: 20px;
}
#field{
    color: white;
}
#testSubject{
    width: 100px;
    height: 30px;
}

<!DOCTYPE html>
<html style="background-color:black; margin:0;padding:0;" lang="en-US">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta name="description" content="The text keyboard provides the user to write text and copy it without the use of keyboard!"/>
<title>Text Keyboard | website.com</title>
<style>

</style>
</head>
<body>
    <h1 id="heading">
        Text Keyboard
    </h1>
    <p id="description">Just press the alphabet you want and see the magic!</p>
    <div id="keyboard">
        <p id="field"></p>
    </script>
    <button type="button" onclick="change()" value="Click Me!" id="testSubject">
    </div>
        <!--Always add the script on the bottom of the BODY tag since it contains the script-->
        <script type="text/javascript">
            function change(){
                document.getElementById("field").value = "This changed just now!";
            }
        </script>
</body>
</html>

，当我尝试打印 Field 标签的 value 时，它打印出文本，但在浏览器上，没有任何变化。我是在跳过一些细节还是什么，因为即使在 Whosebug 上阅读并尝试了其他问题之后，也没有任何变化。请帮助。

Answer 1

你需要改变 2 件事

首先您需要使用textContent或innerHTML将文本更改为 document.getElementById("field").textContent = "This changed just now!";

及以下是可选更改（如果您想将其着色为白色）

您需要更改颜色才能看到更改，否则它是不可见的，因为颜色是白色。

#field { color: black; }

function change() {
  document.getElementById("field").textContent = "This changed just now!";
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  margin: 0;
  padding: 0;
}

#heading {
  color: white;
  text-align: center;
  font-size: 24px;
  font-weight: 420 bold;
  font-family: sans-serif;
  text-shadow: 2px 2px red;
  margin-right: 10px;
  margin-top: 20px;
}

#description {
  color: green;
  text-align: center;
  font-size: 19px;
  font-weight: 69 bold;
  font-family: serif;
  text-shadow: 1px 1px white;
  margin-right: 10px;
  margin-top: 20px;
}

#field {
  color: black;
}

#testSubject {
  width: 100px;
  height: 30px;
}

<h1 id="heading">
  Text Keyboard
</h1>
<p id="description">Just press the alphabet you want and see the magic!</p>
<div id="keyboard">
  <p id="field"></p>
  </script>
  <button type="button" onclick="change()" value="Click Me!" id="testSubject">Test</button>
</div>

Answer 2

要么使用文本输入：

<input type="text" />

这可能是更好的选择，但当然不是必须的。

或者使用 innerHTML:

document.getElementById("field").innerHTML = "This changed just now!";

这将解决您的问题。

Answer 3

.value = x 不适用于 div，value 只应真正用于输入。请尝试使用 innerHTML。

function change(){
  document.getElementById("field").innerHTML = "This changed just now!";
}

a{
    color: inherit;
    text-decoration: none;
}
*{
    margin:0;
    padding:0;
}
#heading{
    color: white;
    text-align: center;
    font-size: 24px;
    font-weight: 420 bold;
    font-family: sans-serif;
    text-shadow: 2px 2px red;
    margin-right: 10px;
    margin-top: 20px;
}
#description{
    color: green;
    text-align: center;
    font-size: 19px;
    font-weight: 69 bold;
    font-family: serif;
    text-shadow: 1px 1px white;
    margin-right: 10px;
    margin-top: 20px;
}
#field{
    color: white;
}
#testSubject{
    width: 100px;
    height: 30px;
}

<!DOCTYPE html>
<html style="background-color:black; margin:0;padding:0;" lang="en-US">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta name="description" content="The text keyboard provides the user to write text and copy it without the use of keyboard!"/>
<title>Text Keyboard | website.com</title>
</head>
<body>
    <h1 id="heading">
        Text Keyboard
    </h1>
    <p id="description">Just press the alphabet you want and see the magic!</p>
    <div id="keyboard">
        <p id="field"></p>
        <button type="button" onclick="change()" value="Click Me!" id="testSubject"></button>
    </div>
</body>
</html>

为什么 JavaScript 代码没有改变值？

Why is the JavaScript code not changing Values?

html

javascript

css

browser

getelementbyid