How to add a text(string) inside a div box?

Question

So I've tried using document.querySelector('[data-current-operand]').innerHTML = "test123" and document.querySelector('[data-previous-operand]').innerHTML = "test123" as well as .innerText but it's still not working. Because it's not working, I've to write down inside the div box in html file. It works that way but it's not practical. What did I do wrong here ?

.body {
  display: flex;
  flex: 1;
}

.calc-interface {
  display: flex;
  flex-direction: column;
}

output {
  display: flex;
  flex-direction: column;
}

.previous-operand {
  display: flex;
  flex: 1;
  width: 220px;
  height: 150px;
  border: 2px solid grey;
  justify-content: flex-end;
  align-items: center;
}

.current-operand {
  display: flex;
  background-color: antiquewhite;
  flex: 1;
  width: 220px;
  height: 150px;
  border: 2px solid grey;
  justify-content: flex-end;
  align-items: center;
}

.size-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  margin-left: 70px;
}

.numbers {
  display: inline-block;
  gap: 4px;
  width: 220px;
  margin-top: 5px;
}

#digits {
  padding: 15px;
  width: 40px;
  margin: 1px;
}

.operator {
  padding: 15px;
  width: 40px;
  margin: 1px;
}

<head>
  <script>
    document.querySelector('[data-previous-operand]').innerHTML = "test";
    document.querySelector('[data-current-operand]').innerHTML = "test";
  </script>
</head>

<body>
  <div class="calc-interface">
    <div class="output">
      <div data-previous-operand class="previous-operand" id="previous-operand"> </div>
      <div data-current-operand class="current-operand" id="current-operand"> </div>
    </div>

    <div class="numbers">
      <button data-number id="digits"> 1 </button>
      <button data-number id="digits"> 2 </button>
      <button data-number id="digits"> 3 </button>
      <button data-operation id="+" class="operator"> + </button>
      <button data-number id="digits"> 4 </button>
      <button data-number id="digits"> 5 </button>
      <button data-number id="digits"> 6 </button>
      <button data-operation id="-" class="operator"> - </button>
      <button data-number id="digits"> 7 </button>
      <button data-number id="digits"> 8 </button>
      <button data-number id="digits"> 9 </button>
      <button data-operation id="*" class="operator"> * </button>
      <button data-all-clear id="clear" class="operator"> C </button>
      <button data-number id="digits" class="zero"> 0 </button>
      <button data-equal id="equal" class="operator"> = </button>
      <button data-operation id="/" class="operator"> / </button>
    </div>

  </div>
</body>

Seems to be working fine, are you sure the dom is ready when you're running it? — Alicia Sykes, Aug 15 '22 at 14:38
Do you see the console errors above? I'd guess that they also appear in your page. This is due to the reason Lissy93 mentioned. — isherwood, Aug 15 '22 at 14:39
As Jairo Py point out. it works ! but why is it like that though ? any references I can refer to ? btw other alternatives is by adding 'defer' in the script . — Jabri Juhinin, Aug 15 '22 at 14:48
See the two linked duplicates. There's lots of information there. — isherwood, Aug 15 '22 at 14:49

How to add a text(string) inside a div box?

0 Answers0