Trying to grap the input value and display, Can anyone tell me what i'm doing wrong here?

Question

Is anyone else having trouble grabbing the input value using.value?

I usually do it like this, but doesn't seem to be working.

const getVal = document.getElementById('newtext').value;
const getBtn = document.getElementById('btn');

getBtn.addEventListener('click',displayNewText);

function displayNewText(){
    return document.getElementById('displaytext').innerHTML = getVal;
    console.log(getVal);
}


    <script src="index.js" defer></script>
</head>
<body>
    <h1>This is my first note</h1>
    <input id="newtext" type="text" value=""><br>
    <button id="btn">Press Me</button>
    <h3 id="displaytext"></h3>

Answer 1

You have to get.value when the function is called and console.log will never show after the return statement, so to debug do it before.

const getVal = document.getElementById('newtext');
const getBtn = document.getElementById('btn');

getBtn.addEventListener('click',displayNewText);

function displayNewText(){
    console.log("im working yey")
    return document.getElementById('displaytext').innerHTML = getVal.value;
}

Answer 2

The problem is that you're getting value once your code gets excuted.. hence, value = ""

To solve this problem, you have to get value whenever the button is clicked

so, just move getVal inside the function

 const getBtn = document.getElementById('btn'); getBtn.addEventListener('click', displayNewText); function displayNewText() { const getVal = document.getElementById('newtext').value; return document.getElementById('displaytext').innerHTML = getVal; }

 <h1>This is my first note</h1> <input id="newtext" type="text" value=""><br> <button id="btn">Press Me</button> <h3 id="displaytext"></h3>

Trying to grap the input value and display, Can anyone tell me what i'm doing wrong here?

Question

2 answers

solution1
0 2022-09-01 15:24:40

solution2
0 2022-09-01 15:26:36

Trying to grap the input value and display, Can anyone tell me what i'm doing wrong here?

Question

2 answers

solution1 0 2022-09-01 15:24:40

solution2 0 2022-09-01 15:26:36

solution1
0 2022-09-01 15:24:40

solution2
0 2022-09-01 15:26:36