textContent value is null-CodePudding

When I press any number button, I want the number to be written in the "num-area" and then I want to take this text and turn it into an array. but the textcontent of the "pre" element when I turn it into an array its value is always null("length:0") even though I have entered the numbers.

const typedNum = document.querySelector("#num-area");
const result = document.querySelector("#result");
const one = document.querySelector("#one");
const two = document.querySelector("#two");
const plus = document.querySelector("#plus");
const equal = document.querySelector("#equal");
const arr_equation = typedNum.textContent.split("");
one.addEventListener("click", function () {
    typedNum.textContent  = "1";
})
two.addEventListener("click", function () {
    typedNum.textContent  = "2";
})
plus.addEventListener("click", function () {
    typedNum.textContent  = "   ";
})
equal.addEventListener("click", function () {
    result.textContent = arr_equation;
})

#num-area {
    width: 440px;
    height: 100px;
    position: absolute;
    top: 0;
    font-family: Arial;
    font-size: 35px;
    background-color: #ddd;
    color: #000;
    padding:20px;
}
#result {
    width: 440px;
    height: 50px;
    position: absolute;
    top: 150px;
    font-family: Arial;
    font-size: 20px;
    background-color: #fdd;
    color: #000;
}
span {
    bottom: 0;
    position: absolute;
    width: 90px;
    height: 55px;
    background-color: blue;
    border-radius: 15px;
    color: #fff;
    font-size: 20px;
    font-family: Arial;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#one {
  margin-left: 100px;
}
#plus {
  margin-left: 200px;
}
#equal {
  margin-left: 300px;
}

<pre id="num-area"></pre>
<pre id="result"></pre>
<span id="one">1</span>
<span id="two">2</span>
<span id="plus"> </span>
<span id="equal">=</span>

CodePudding user response：

This line executes once, and then if you use arr_equation variable later, it will always return the same value, it's not going to update automatically, when typedNum is changed:

const arr_equation = typedNum.textContent.split("");

What you need to do, is to calculate arr_equation each time you click on equal button.

For example:

equal.addEventListener("click", function () {
    const arr_equation = typedNum.textContent.split("").filter(item => item !== " ");
    result.textContent = arr_equation;
})

CodePudding user response：

It looks as though you making a basic calculator, if so do you need an array ? you could just do something like this:

const typedNum = document.querySelector("#num-area");
const result = document.querySelector("#result");
const one = document.querySelector("#one");
const two = document.querySelector("#two");
const plus = document.querySelector("#plus");
const equal = document.querySelector("#equal");
let add = false;
let equationPartA = "0"
let equationPartB = "0"
one.addEventListener("click", function() {
  typedNum.textContent  = "1";
  if (!add) {
    equationPartA  = "1";
  } else {
    equationPartB  = "1";
  }
})
two.addEventListener("click", function() {
  typedNum.textContent  = "2";
  if (!add) {
    equationPartA  = "2";
  } else {
    equationPartB  = "2";
  }
})
plus.addEventListener("click", function() {
  add = true
  typedNum.textContent  = "   ";
})
equal.addEventListener("click", function() {
  result.textContent = parseInt(equationPartA, 10)  
    parseInt(equationPartB, 10)
  add = false,
    typedNum.textContent = ''
  equationPartA = '0'
  equationPartB = '0'
})

#num-area {
  font-family: Arial;
  font-size: 35px;
  background-color: #ddd;
  color: #000;
  width: 300px;
  float: left;
  height: 50px;
  margin: 10px;
  box-sizing: border-box;
  padding: 10px;
}

#result {
  font-family: Arial;
  font-size: 20px;
  background-color: #fdd;
  color: #000;
  width: 100px;
  float: left;
  height: 50px;
  margin: 10px;
  box-sizing: border-box;
  padding: 10px;
}

span {
  bottom: 0;
  position: absolute;
  width: 90px;
  height: 55px;
  background-color: blue;
  border-radius: 15px;
  color: #fff;
  font-size: 20px;
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#one {
  margin-left: 100px;
}

#plus {
  margin-left: 200px;
}

#equal {
  margin-left: 300px;
}

<pre id="num-area"></pre>
<pre id="result"></pre>
<span id="one">1</span>
<span id="two">2</span>
<span id="plus"> </span>
<span id="equal">=</span>

I hope this helps