How to change the content of a span element to that of a variable

set value in span using javascript
how to get span value in javascript
jquery change span text
innerhtml
javascript change innertext of span
how to get span class value in javascript
how to get span id value in jquery
span html

I'm doing a rock paper scissors game and most of the coding is done except that I didn't add a functionality to the buttons, no matter what you click on you'll choose paper.

Before adding that functionality I want for the score to be updated on the webpage but whenever it tries to update I get :

Uncaught TypeError: Cannot set property 'textContent' of null

let choices = ["rock", "paper", "scissors"]
let localPlay = "paper"
let cpuChoice;
let scorePlayer = 0
let scoreCPU = 0
let playerPoints = document.getElementById("pScore")
let cpuPoints = document.getElementById("cScore")

function cpuPlay() {
  cpuChoice = choices[Math.floor(Math.random() * choices.length)];
  return cpuChoice
}

function gameConditions() {
  // DRAW
  if (localPlay === cpuChoice) {
    console.log("draw")

    // ROCK
  } else if (localPlay === choices[0] && cpuChoice === choices[1]) {
    scoreCPU = scoreCPU + 1
    return cpuPoints.textContent = scoreCPU;
    //cpu
  } else if (localPlay === choices[0] && cpuChoice === choices[2]) {
    scorePlayer = scorePlayer + 1
    return playerPoints.textContent = scorePlayer;
    //player

    // PAPER
  } else if (localPlay === choices[1] && cpuChoice === choices[0]) {
    scorePlayer = scorePlayer + 1
    return playerPoints.textContent = scorePlayer;
    //player
  } else if (localPlay === choices[1] && cpuChoice === choices[2]) {
    scoreCPU = scoreCPU + 1
    return cpuPoints.textContent = scoreCPU;
    //cpu

    // SCISSORS
  } else if (localPlay === choices[2] && cpuChoice === choices[0]) {
    scoreCPU = scoreCPU + 1
    return cpuPoints.textContent = scoreCPU;
    //cpu
  } else if (localPlay === choices[2] && cpuChoice === choices[1]) {
    scorePlayer = scorePlayer + 1
    return playerPoints.textContent = scorePlayer;
    //player
    // DEBUG
  } else {
    console.log("not working")
  }
}

function shoot() {
  cpuPlay();
  gameConditions();
  console.log(cpuChoice)
  imageChanger();
  console.log("Player score: " + scorePlayer)
  console.log("Cpu score: " + scoreCPU)
}

function imageChanger() {
  let cpuImage = document.getElementById("cpuImg")
  if (cpuChoice === choices[0]) {
    cpuImage.src = "https://rodpa715.github.io/rock-paper-scissors/images/rock.png"
  } else if (cpuChoice === choices[1]) {
    cpuImage.src = "https://rodpa715.github.io/rock-paper-scissors/images/paper.png"
  } else if (cpuChoice === choices[2]) {
    cpuImage.src = "https://rodpa715.github.io/rock-paper-scissors/images/scissors.png"
  }
}
* {
  background-color: #9f85db;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

.choices {
  display: inline-block;
  height: 175px;
  width: 175px;
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  text-align: center;
  cursor: pointer;
}

.choices img {
  height: 150px;
  width: 150px;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Rock Paper Scissors</title>
    <script type="text/javascript" src="./game.js"></script>
    <!--<link href="./style.css" type="text/css" rel="stylesheet">-->
  </head>

  <body>
    <h1>Rock Paper Scissors</h1>

    <div class="score">
      <h3>Player score: <span id="pScore"> 0 </span></h3>
      <h3>Cpu score: <span id="cScore"> 0 </span> </h3>
    </div>

    <div class="cpu">
      <h2>Cpu has chosen :</h2>
      <div class="choices"><img id="cpuImg" src=""></div>
    </div>

    <div class="player">
      <h2>Choose one :</h2>

      <div class="choices">
        <img src="https://rodpa715.github.io/rock-paper-scissors/images/rock.png" onclick="shoot();">
      </div>

      <div class="choices">
        <img src="https://rodpa715.github.io/rock-paper-scissors/images/paper.png" onclick="shoot();">
      </div>

      <div class="choices">
        <img src="https://rodpa715.github.io/rock-paper-scissors/images/scissors.png" onclick="shoot();">
      </div>
    </div>

  </body>

</html>

Just add your script tag inside body tag instead of head.

It will work!!!

JavaScript, Return value: It returns a string, representing the “rendered” text content of a node and all its descendants. Example 1: This example changes the content by using� There are various methods used to change the span elements which are discussed below: jQuery text() Method: This method set/return the text content of specified elements. If this method is used to return content, it returns the text content of all matched elements (HTML tags will be removed).


This is most common problem with JS and HTML. JS will load before whole HTML, so when you trying to make a DOM variables, there is nothing (spans aren't loaded yet). So you can make a onLoad event, that will meke these variables, or don't make these variables, and setting value directly to spans.

JQuery, There are various methods used to change the span elements which are discussed below: jQuery text() Method: This method set/return the text content of specified� span = document.getElementById("myspan"); txt = document.createTextNode("your cool text"); span.appendChild(txt); For more information about this vulnerability: Cross Site Scripting (XSS) - OWASP. Edited nov 4th 2017: Modified third line of code according to @mumush suggestion: "use appendChild(); instead".


Try this:

else if (localPlay === choices[0] && cpuChoice === choices[1]){
    scoreCPU = scoreCPU + 1
    cpuPoints.innerText = scoreCPU;
}

.html(), Get the HTML contents of the first element in the set of matched elements or set In order for the following <div> 's content to be retrieved, it would have to be� A span is an inline element, and must only contain text content or nested inline or phrase elements. It shouldn’t be used to surround block-level elements—a usage that’s often seen in


HTML DOM textContent Property, If you set the textContent property, any child nodes are removed and replaced by a Tip: To set or return the HTML content of an element, use the innerHTML innerText returns: "This element has extra spacing and contains a span element. 1. HTML span element is a container for holding other inline elements or content directly (text, image).. 2. Usually span element is used to group inline elements together to implement style (using id or class attributes) or language information or JavaScript DOM(using id or class attributes), when no other element is found suitable to form that group.


HTML DOM innerText Property, The innerText property sets or returns the text content of the specified node, Tip : To set or return the HTML content of an element, use the innerHTML property innerText returns: "This element has extra spacing and contains a span element� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.


jQuery: Set a value in a span using jQuery, jQuery Practical Exercises with Solution: Set a value in a span using jQuery. Next: Find the class of the clicked element. What is the difficulty� how to set text or HTML content for span using jquery/Javascript. Hello Learner. Login In order to set value/text or html to span element using JQuery/Javascript