Why is the JavaScript code not changing Values?

Question

I am just returning to Web Dev(After learning another Language), and I just thought of a project, a text keyboard(When the mouse clicks on the desired alphabet, it adds that to a string), but the JS code is not working properly. I was just seeing whether I can change the value of a <p> tag, but it is not changing, or should I say appearing.

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>

, when I try to print the value of the Field tag, it prints out the text, but on the browser, nothing changes. Am I skipping some details or what, since even after reading and trying out other questions on StackOverflow, nothing changes. Please Help.

Or [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) — yunzen, May 18 '21 at 11:29
As a rule of thumb use `textContent` not `innerHTML` when possible, because latter makes your app vulnerabel to [Cross-site Scripting Attacks](https://dev.to/caffiendkitten/innerhtml-cross-site-scripting-agc). — FelHa, May 18 '21 at 11:31

score 3 · Accepted Answer · answered May 18 '21 at 11:26

You need to change 2 things

First you need to use textContent or innerHTML to change text as document.getElementById("field").textContent = "This changed just now!";

and below is an optional change (if you want to color it in white)

You need to change color to see the changes else it is invisible because color is white.

#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>

The optional change is wrong since I have set the background color to black, so white is visible. — Yung, May 18 '21 at 11:36

score 1 · Answer 2 · answered May 18 '21 at 11:27

1

Either use a text input:

<input type="text" />

That could be the better option but of course doesn't have to be.

Or use innerHTML:

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

That will fix your issue.

answered May 18 '21 at 11:27

Wilco Bakker

527
1
7
18

score 0 · Answer 3 · answered May 18 '21 at 11:28

.value = x will not work for a div, value should only really be used for inputs. Try using innerHTML instead.

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>

Why is the JavaScript code not changing Values?

3 Answers3