我是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>

​

请帮我找到代码中的错误，我正在学习es6 JavaScript，找不到错误

Answer 1

我假设您希望在output上显示输入的值。在这种情况下，您应该将name.value传递给greet()函数！

我已经删除了gname常量，因为这里不需要它们。但是，您可以在output函数中移动gname，因为它只需要在函数中，而不是在其他任何地方。

​

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

gname被分配为输入元素值- const gname = name.value;，您的input元素最初是空的。因此，每次调用pout(gname)时，gname都会有空字符串。如果要在输入中传递输入的值，请传递name.value而不是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>

​