There's a problem I've encountered but can't find explanation so far. The code is as follows:

let textbox = document.getElementById("textbox");
let result = document.getElementById("result");

function convertToCm() {
  value = textbox.value;
  result.innerText =  value * 2.54;
  document.body.appendChild(result);
}

<input id="textbox" type="text">
<button onclick="convertToCm()">Convert to cm</button>
<div id="result">result</div>

(I tried pasting the code here but it keeps telling me there's indentation problem even after fixing it, so there's the link to the screenshot)

In the second line of the function, I tried to use textbox.innerText instead, however this gives me output of 0 of whichever number I put in the textbox. In the third line, I also tried to use result.value instead, but it would then output the same number I put in the textbox. I'm really confused.

I've tried looking on google but haven't found an explanation so far. Could someone please help me? Thank you so much!

CodePudding user response：

Your textbox refers to an HTMLInputElement (or <input>), which is a void element. As such, its .innerText is always an empty string.
Converting an empty string to a number will evaluate to zero.

Instead, use .value to read or write to a form control's value (form controls are for example <input>, <select>, <textarea>).

To read or write a non-void element's text, use .innerText (or preferably .textContent, as it doesn't cause a reflow). Your variable result references an HTMLDivElement—a non-void element.

In the second line you update result.innerText. This will be reflected in the DOM immediately.
Because result already exists in the DOM, and is updated as you wanted, it is actually unnecessary to reappend it.

Feedback:
I recommend to keep functionality purely in your <script> (or JS file) for maintainability. Using the onevent HTML attributes is (usually) deprecated. Instead, use addEventListener():

• Allows multiple event listeners to be added.
• Allows setting of options for the listener.
• Easier finding of dead code.
• The event object is always passed as the first argument, instead of having to manually pass it or use the deprecated window.event property.
• Doesn't clutter the HTML.

CodePudding user response：

To get or set value from input field we need to use .value as you write textbox.value which is correct.

<input id="textbox" type="text">

To get or set value from common elements (it could be any element/tag) we use .innerText as you write result.innerText which is correct.

<div id="result">result</div>

Also you don't need document.body.appendChild(result); line in your code.