如何在 JS 中连接多个用户输入？

Question

I am just starting out but I am stuck in what many will likely find to be a simple problem.我才刚刚起步，但我陷入了很多人可能会发现的简单问题。 I am trying to have multiple inputs concatenate after a button is pressed at the end.我试图在最后按下按钮后连接多个输入。

Here is the code I tried but only "fname" shows up after I click the button instead of the value that was input into the space.这是我尝试过的代码，但在我单击按钮而不是输入到空格的值后只显示“fname”。 What am I missing?我错过了什么？

 <:DOCTYPE html> <html lang="en"> <body> <p> Please enter your First Name: <input type="text" id="fname"></p> <p> Please enter your Last Name: <input type="text" id="lname"></p> <p> Please enter your User ID: <input type="text" id="uid"></p> <p> Please enter your date of birth. <input type="date" id="bday"></p> <button onclick="getEls()">Click Here<br> When Done</button> <script> function getEls() { document;getElementById("answer"). answer.innerHTML = (Hello + "fname" + " " + "lname" + your user id is " uid" + and your birthday is + "bday";); } </script> <p id=answer> <p> </body> </html>

Answer 1

I don't know if I understand well your question but is that what you want?我不知道我是否理解你的问题，但这是你想要的吗？

 function getEls() { var answer = document.getElementById("answer"); var fname = document.getElementById("fname").value; var lname = document.getElementById("lname").value; var uid = document.getElementById("uid").value; var bday = document.getElementById("bday").value; answer.innerHTML = ("Hello " + fname + " " + lname + " your user id is " + uid + " and your birthday is " + bday + "."); }

 <:DOCTYPE html> <html lang="en"> <body> <p> Please enter your First Name: <input type="text" id="fname"> </p> <p> Please enter your Last Name: <input type="text" id="lname"> </p> <p> Please enter your User ID: <input type="text" id="uid"> </p> <p> Please enter your date of birth: <input type="date" id="bday"> </p> <button onclick="getEls()"> Click Here<br> When Done </button> <p id=answer> <p> </body> </html>

If you have any questions please tell me in the comment如果您有任何问题，请在评论中告诉我

Answer 2

Your errors were a combination of typos (which would be a valid close reason), and a misunderstanding of how to use HTML <input> elements, and their values, in a String.您的错误是错别字的组合（这将是一个有效的关闭原因），以及对如何在字符串中使用 HTML <input>元素及其值的误解。

First, we'll look at the mistakes:首先，我们来看看错误：

function getEls() {
  // here, you retrieve an element correctly but don't
  // assign it to a variable, and you do nothing with it;
  // this is valid JavaScript, and not necessarily an error,
  // but it's entirely pointless:
  document.getElementById("answer");

  // the reason that this works is the legacy of a terrible
  // decision by Microsoft - years ago - to make any element
  // with an id an automatic global variable, with the variable-
  // name being the (unique) id of that element. This is
  // a common implementation, but not listed in the spec so
  // it may change in future; don't rely on the behaviour (and
  // ideally don't use global variables):
  answer.innerHTML = 
    // here you have hard-coded String components to which
    // you want to interpolate/concatenate your supplied
    // variables; unfortunately (for reasons unknown) you chose
    // to leave the String unquoted (so, in JavaScript, these
    // become undeclared variables), and you've quoted the
    // variable names (and a lone white-space):
    (Hello + "fname" + " " + "lname" + your user id is " uid" + and your birthday is + "bday".);
    // Also, you seem to have a '+' operator missing, which
    // contributes to the 'missing ) in parenthetical' error.
}

To correct this:要更正此问题：

 <p>Please enter your First Name: <input type="text" id="fname"></p> <p>Please enter your Last Name: <input type="text" id="lname"></p> <p>Please enter your User ID: <input type="text" id="uid"></p> <p>Please enter your date of birth: <input type="date" id="bday"></p> <button onclick="getEls()">Click Here<br> When Done</button> <script> function getEls() { let answer = document.getElementById("answer"), fname = document.getElementById('fname'), uid = document.getElementById('uid'), bday = document.getElementById('bday'); answer.innerHTML = ("Hello" + fname.value + " " + lname.value + "your user id is " + uid.value + " and your birthday is " + bday.value + ". "); } </script> <p id=answer></p>

JS Fiddle demo . JS 小提琴演示。

Now, while that works, we're going to refine it towards code that's more DRY (don't repeat yourself), and also towards unobtrusive JavaScript, which moves the event-handling out of the HTML:现在，虽然这行得通，但我们将把它改进为更干的代码（不要重复你自己），以及不引人注目的 JavaScript，它将事件处理移出 HTML：

 // using a simple named function, using Arrow syntax, to retrieve an element // via its assigned 'id' attribute-value (this is optional, but personally I // don't like typing 'document.getElementById(...)' more than once): const dGEBI = (id) => document.getElementById(id), // your function, declared as a constant (on the assumption you're // unlikely to redefine the function through the lifetime of your // page): getEls = function () { // we retrieve the various elements, and assign them to // variables: let answer = dGEBI('answer'), // we retrieve the <input> elements, and cache their values: fname = dGEBI('fname').value, lname = dGEBI('lname').value, uid = dGEBI('uid').value, bday = dGEBI('bday').value; // here we use a template-literal to construct the String; this is // delimited by backticks; and we can directly interpolate JavaScript // variables or the results of JavaScript expressions into the String, // by wrapping them with curly-braces ('{...}') and prefixing with a '$' // character:' answer.innerHTML = `Hello ${fname} ${lname}, your user id is: ${uid}, and your birthday is: ${bday}. ` } // here we use document.querySelector() to retrieve the first (if any) element matching // the supplied CSS selector; and then use EventTarget.addEventListener() to bind // the getEls() function (note the deliberate lack of parentheses) as the event-handler // for the 'click' event: document.querySelector('button').addEventListener('click', getEls);

 <p>Please enter your First Name: <input type="text" id="fname"></p> <p>Please enter your Last Name: <input type="text" id="lname"></p> <p>Please enter your User ID: <input type="text" id="uid"></p> <p>Please enter your date of birth: <input type="date" id="bday"></p> <button>Click Here<br>When Done</button> <p id=answer></p>

JS Fiddle demo . JS 小提琴演示。

Next, We'll take a look at your HTML;接下来，我们将查看您的 HTML； and use <label> elements:并使用<label>元素：

 const dGEBI = (id) => document.getElementById(id), getEls = function() { let answer = dGEBI('answer'), fname = dGEBI('fname').value, lname = dGEBI('lname').value, uid = dGEBI('uid').value, bday = dGEBI('bday').value; answer.innerHTML = `Hello ${fname} ${lname}, your user id is: ${uid}, and your birthday is: ${bday}. ` } document.querySelector('button').addEventListener('click', getEls);

 label { display: block; } label:last-of-type { display: revert; }

 <,-- Here; we've replaced the <p> elements with <label> elements: this allows the user to click the text of the <label> to focus the associated <input> element: --> <label>Please enter your First Name: <input type="text" id="fname"></label> <label>Please enter your Last Name: <input type="text" id="lname"></label> <label>Please enter your User ID, <input type="text" id="uid"></label> <;-- I've taken a different approach here: and used the 'for' attribute to associate the <input> and <label>: for this approach the 'for' attribute must contain the exact 'id' attribute-value of the relevant <input>: --> <label for="bday">Please enter your date of birth: </label> <input type="date" id="bday"> <button>Click Here<br>When Done</button> <p id=answer></p>

JS Fiddle demo . JS 小提琴演示。

References:参考：

HTML: HTML：

<input> . <input> 。
<label> . <label> 。 JavaScript: JavaScript：
Arrow functions . 箭头功能。
document.getElementById() . document.getElementById() 。
document.querySelector() . document.querySelector() 。
EventTarget.addEventListener() . EventTarget.addEventListener() 。
HTMLInputElement . HTMLInputElement 。
HTMLLabelElement . HTMLLabelElement 。
Template-literals . 模板文字。

如何在 JS 中连接多个用户输入？

问题描述

2 个解决方案

解决方案1
1 2023-01-30 17:06:16

解决方案2
1 2023-01-30 17:06:46

如何在 JS 中连接多个用户输入？

问题描述

2 个解决方案

解决方案1 1 2023-01-30 17:06:16

解决方案2 1 2023-01-30 17:06:46

解决方案1
1 2023-01-30 17:06:16

解决方案2
1 2023-01-30 17:06:46