How to make it work? (rock paper scissor game)

JavaScript
1

Hello I have created a simple game "rock paper scissors " it works but i have created a span with id your wins and I am trying to decrease the score if user lose and increase if user wins and the function works because the variable is getting changed but it does not change the value on the page

const optionB = document.getElementById('optionB');
const optionC = document.getElementById('optionC');
const yourChoice = document.getElementById('yourchoice');
const computerChoice = document.getElementById('computerchoice');
let result = document.getElementById('Result');
let w = 0;
let wins = document.getElementById('yourwins').innerText = w;
let c;
function clclclA () {
    optionA.classList.add('useroptionclicked');
    optionB.classList.remove('useroptionclicked');
    optionC.classList.remove('useroptionclicked');
    yourChoice.style.backgroundImage = "url('rockimage.png')";
   return c = 1;
}
function clclclB () {
    optionB.classList.add('useroptionclicked');
    optionA.classList.remove('useroptionclicked');
    optionC.classList.remove('useroptionclicked');
    yourChoice.style.backgroundImage = "url('papperimage.png')";
    return c = 2;
}
function clclclC () {
    optionC.classList.add('useroptionclicked');
    optionB.classList.remove('useroptionclicked');
    optionA.classList.remove('useroptionclicked');
    yourChoice.style.backgroundImage = "url('scissorsimage.png')";
    return c = 3;
}
function checkForWin () {
    let p = Math.floor(Math.random() * 3 + 1);
    if (p === 1) {
        computerChoice.style.backgroundImage = "url('rockimage.png')";
    } else if (p === 2) {
        computerChoice.style.backgroundImage = "url('papperimage.png')";
    } else if (p === 3) {
        computerChoice.style.backgroundImage = "url('scissorsimage.png')";
    }

    if (c === 3 && p === 1) {
        result.innerHTML = "You lost";
        w--;
        wins = w;
    }
    if (c === 3 && p === 2) {
        console.log("You won");
        result.innerHTML = "You won";
        w++;
        wins = w;
    }
    if (c === 3 && p === 3) {
        console.log("it's a draw");
        result.innerHTML = "it's a draw";
        wins.innerText = w;
    }
    if (c === 2 && p === 1) {
        console.log("You won");
        result.innerHTML = "You won";
        w++;
        wins = w;
    }
    if (c === 2 && p === 2) {
        console.log("it's a draw");
        result.innerHTML = "it's a draw";
        wins = w;
    }
    if (c === 2 && p === 3) {
        console.log("You lost");
        result.innerHTML = "You lost";
        w--;
        wins = w;
    }
    if (c === 1 && p === 1) {
        console.log("it's a draw");
        result.innerHTML = "it's a draw";
        wins = w;
    }
    if (c === 1 && p === 2) {
        console.log("You lost");
        result.innerHTML = "you lost";
        w--;
        wins = w;
    }
    if (c === 1 && p === 3) {
        console.log("You won");
        result.innerHTML = "You won";
        w++;
        wins = w;
    }
}
3 
let w = 0;
let wins = document.getElementById('yourwins').innerText = w;

I’m not sure that is doing what you think it does. It isn’t saving a reference to the elements innerText property. It is saving the value that is returned (both the setter and getter return the value).

It is the same as doing this.

let w = 0;
const score = document.getElementById('yourwins');
// setter
score.innerText = w;
// getter
let wins = score.innerText;

When you call someElement.innerText = 'Some value' you are accessing the setter and when you call someElement.innerText you are accessing the getter. And as said, they both return the value.

So this

wins = w;

is just giving the wins variable a new value, it is not setting the innerText (it is not calling the setter method on the property).

Slightly offtopic

I’m not sure there is an easy way of saving the actual innerText element setter method out to a variable. One way I found is very convoluted and gives absolutely no benefits (for your usage at least). I’m just posting it for fun.

const wins = document.getElementById("yourwins");

const ownProperty = findPropertyDescriptor(wins, "innerText");
// test setter
ownProperty.set.call(wins, "test");

setTimeout(() => {
  // test setter
  ownProperty.set.call(wins, "New text");
}, 2000);

function findPropertyDescriptor(obj, propName) {
  if (!obj) {
    return;
  }
  return (
    Object.getOwnPropertyDescriptor(obj, propName) ||
    findPropertyDescriptor(Object.getPrototypeOf(obj), propName)
  );
}

Spy On DOM Methods And Properties | Better world by better software