为什么 JavaScript 代码没有改变值？ [复制]答案

【问题标题】：Why is the JavaScript code not changing Values? [duplicate]为什么 JavaScript 代码没有改变值？ [复制]
【发布时间】：2021-05-18 11:23:24
【问题描述】：

我刚刚回到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 时，它会打印出文本，但在浏览器上，没有任何变化。我是否跳过了一些细节或什么，因为即使在阅读并尝试了 StackOverflow 上的其他问题之后，也没有任何改变。请帮忙。

【问题讨论】：

嗨，在 JS 中使用 innerHTML 而不是 value。
只有输入元素有.value属性。
或textContent
根据经验，尽可能使用textContent 而不是innerHTML，因为后者会使您的应用容易受到Cross-site Scripting Attacks 的攻击。

标签： javascript html css browser getelementbyid

【解决方案1】：

你需要改变两件事

首先您需要使用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>

【讨论】：

可选更改是错误的，因为我将背景颜色设置为黑色，所以白色可见。

【解决方案2】：

要么使用文本输入：

<input type="text" />

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

或者使用innerHTML：

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

这将解决您的问题。

【讨论】：

【解决方案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>

【讨论】：