英文:
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:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label> create a username </label>
<input id="textarea"><hr>
<button id="submit">submit</button>
<script src="index.js"></script>
</body>
</html>
let username;
document.getElementById("submit").onclick = function() {
// I think that the problem is here, where the name gets assigned
username = document.getElementById("textarea").value;
}
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 -->
let username;
document.getElementById("submit").onclick = function() {
//i think that the problem is here, where the name gets assigned
username = document.getElementById("textarea").value;
}
console.log(username)
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label> create a username </label>
<input id = "textarea"><hr>
<button id = "submit">submit</button>
<script src=index.js></script>
</body>
</html>
<!-- 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.
let username;
document.getElementById("submit").onclick = function() {
// I think that the problem is here, where the name gets assigned
username = document.getElementById("textarea").value;
console.log(username)
}
Your original JavaScript code can be read like this:
- Create a new variable with no value assigned.
- Console.log the variable: it returns undefined.
- Add an event listener to the code, assign the value to the variable but do not echo it.
Instead, the fixed one does:
- Create a new variable with no value assigned.
- Add an event listener to the code, assign the value to the variable.
- 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 -->
let username;
document.getElementById("submit").onclick = function() {
//i think that the problem is here, where the name gets assigned
username = document.getElementById("textarea").value;
console.log(username)
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>username</title>
</head>
<body>
<label> create a username </label>
<input id="textarea">
<hr>
<button id="submit">submit</button>
<script src=index.js></script>
</body>
</html>
<!-- end snippet -->
Your original js code can be read like this:
- create a new variable with no value assigned.
- console.log the variable: it returns undefined;
- add an event listner to the code, assign the value to the variable but do not echo it.
Instead, the fixed one does:
- create a new variable with no value assigned.
- add an event listner to the code, assign the value to the variable;
- echo it only after it is assigned.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论