“Issues with variable echos” 变量回显的问题

huangapple go评论77阅读模式
英文:

Issues with variable echos

问题

My problem is that I created a little username input, and my variable in JavaScript does not assign to the HTML input box.

So my HTML is:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <label> create a username </label>
  7. <input id="textarea"><hr>
  8. <button id="submit">submit</button>
  9. <script src="index.js"></script>
  10. </body>
  11. </html>
  1. let username;
  2. document.getElementById("submit").onclick = function() {
  3. // I think that the problem is here, where the name gets assigned
  4. username = document.getElementById("textarea").value;
  5. }
  6. console.log(username);
英文:

My problem is that i created a little username input
And my variable in javascript does not assign to the html input box

So my html is :-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let username;
  2. document.getElementById(&quot;submit&quot;).onclick = function() {
  3. //i think that the problem is here, where the name gets assigned
  4. username = document.getElementById(&quot;textarea&quot;).value;
  5. }
  6. console.log(username)

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;/head&gt;
  5. &lt;body&gt;
  6. &lt;label&gt; create a username &lt;/label&gt;
  7. &lt;input id = &quot;textarea&quot;&gt;&lt;hr&gt;
  8. &lt;button id = &quot;submit&quot;&gt;submit&lt;/button&gt;
  9. &lt;script src=index.js&gt;&lt;/script&gt;
  10. &lt;/body&gt;
  11. &lt;/html&gt;

<!-- end snippet -->

I tried changing the variable to name, username, first name etc. But it didn't work

Then i tried changing the id's but that didn't work either
It always says "undefined"

答案1

得分: -1

I fixed your HTML and moved the console.log after the username has been defined, and it works as expected.

  1. let username;
  2. document.getElementById("submit").onclick = function() {
  3. // I think that the problem is here, where the name gets assigned
  4. username = document.getElementById("textarea").value;
  5. console.log(username)
  6. }

Your original JavaScript code can be read like this:

  1. Create a new variable with no value assigned.
  2. Console.log the variable: it returns undefined.
  3. Add an event listener to the code, assign the value to the variable but do not echo it.

Instead, the fixed one does:

  1. Create a new variable with no value assigned.
  2. Add an event listener to the code, assign the value to the variable.
  3. Echo it only after it is assigned.
英文:

I fixed your html and moved the console.log after the username has been defined and it works as expected

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let username;
  2. document.getElementById(&quot;submit&quot;).onclick = function() {
  3. //i think that the problem is here, where the name gets assigned
  4. username = document.getElementById(&quot;textarea&quot;).value;
  5. console.log(username)
  6. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;username&lt;/title&gt;
  5. &lt;/head&gt;
  6. &lt;body&gt;
  7. &lt;label&gt; create a username &lt;/label&gt;
  8. &lt;input id=&quot;textarea&quot;&gt;
  9. &lt;hr&gt;
  10. &lt;button id=&quot;submit&quot;&gt;submit&lt;/button&gt;
  11. &lt;script src=index.js&gt;&lt;/script&gt;
  12. &lt;/body&gt;
  13. &lt;/html&gt;

<!-- end snippet -->

Your original js code can be read like this:

  1. create a new variable with no value assigned.
  2. console.log the variable: it returns undefined;
  3. add an event listner to the code, assign the value to the variable but do not echo it.

Instead, the fixed one does:

  1. create a new variable with no value assigned.
  2. add an event listner to the code, assign the value to the variable;
  3. echo it only after it is assigned.

huangapple
  • 本文由 发表于 2023年4月19日 17:48:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76053077.html
  • html
  • javascript

如何在HTML的 :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定