我是es6 javascript的新手

Question

 const name = document.getElementById('fname'); const submit = document.getElementById('submit'); const out = document.getElementById('out'); const gname = name.value; // greet function const greet = (n) => { return `hello ${n}`; }; // output const pout = (fname) => { out.innerHTML = greet(fname); }; // call event submit.addEventListener("click", () => { pout(gname) }); 

 <input type="text" id="fname" placeholder="Please enter your name"><br> <button id="submit" >Submit</button> <br><br> OUTPUT: <span id="out"></span> 

Please help me to find the error in the code, i'm learning es6 JavaScript, can't find the error

Answer 1

I am assuming you want to display the value of the input on output . In that case, you should be passing name.value to the greet() function!

I have removed the gname constant, as they are not needed here. However, you may instead move gname within the output function since it is only needed within the function, and not anywhere else.

 const name = document.getElementById('fname'); const out = document.getElementById('out'); const submit = document.getElementById('submit'); // greet function const greet = (n) => { return `hello ${n}`; }; // output const pout = () => { out.innerHTML = greet(name.value); }; // call event submit.addEventListener("click", (event) => { pout(); }); 

 <input type="text" id="fname" ><br> <button id="submit" >Submit</button> <br><br> OUTPUT: <span id="out"></span> 

Answer 2

The gname is assigned the input element value - const gname = name.value; and your input element is empty initially. So everytime you call pout(gname) , gname will have empty string. If you want to pass the entered value in input, pass name.value and not gname .

submit.addEventListener("click", () => { pout(name.value) });

 const name = document.getElementById('fname'); const submit = document.getElementById('submit'); const out = document.getElementById('out'); // greet function const greet = (n) => { return `hello ${n}`; }; // output const pout = (fname) => { out.innerHTML = greet(fname); }; // call event submit.addEventListener("click", () => { pout(name.value) }); 

 <input type="text" id="fname" placeholder="Please enter your name"><br> <button id="submit">Submit</button> <br><br> OUTPUT: <span id="out"></span>