为什么这不会显示值？

Question

I want to use a value from a HTMl input but i cant make it into a variabel. Im a beginner at this so maybe it will be pretty obvious to you but i couldnt find anything on the internet that helped me with my problem.

script.js:

 function getInputValue(){ 
    var inputVal = document.getElementById("numberIn").value;  
    return inputVal;
}
document.getElementById('numberOut').innerHTML = getInputValue();

index.html:

<input type="text" placeholder="Dezimalzahl hier eingeben" id="numberIn">
<button type="button" onclick="getInputValue();">Convertieren</button>

<p id="numberOut"></p> 
 
<script src="script.js"></script>

Answer 1

The reason it doesn't work for you is because the line document.getElementById('numberOut').innerHTML = getInputValue(); gets ran only once, when the input is empty. Your button's onclick only returns the value from the input, but it doesn't re-set it into numberOut .

Please look at my example, I took the same exact line and put it into a function that a button executes, and it seems to work perfectly!

 function getInputValue() { const inputValue = document.getElementById("myInput").value; return inputValue; } function showValue() { document.getElementById("result").innerHTML = getInputValue() }

 <input type="text" id="myInput"/> <div id="result"></div> <button onclick="showValue()">Click Me!</button>

Answer 2

Your idea is

When I click on the button, that's what should happen:

1. Read the value for an input element from the DOM.
2. Assign that value to another element.

but, in your implementation you did

When I click on the button:

1. Read the value.
2. Return it.

Believe me, that's what your implementation is saying.

If we came to the last step

document.getElementById('numberOut').innerHTML = getInputValue();

He's calling you, "Hey, why you are putting me outside the function, we did not agree like that".

So, that is the first correction

Let deal with the assignment function and place it inside the function.

The second, and after placed the assignment function in his reserved place... the function now has the full steps

1. Read the value.
2. ... ... ...

Assign it to the other element directly:), there is nothing that my function should return.

And, now!

Should I write the final getInputValue() function, or I let it to you?

Greetings;)