英文:
get value from HTML input using JS
问题
我刚开始学习编程，试图将面向对象编程范式应用于一个示例中。
尝试创建一个对象（这里是角色），并将其属性分配为HTML文件中输入的值。
出现的错误是'javascript.js:14 Uncaught TypeError: Cannot read properties of null (reading 'value')。
<body>
<label for="namebox">角色名</label>
<input type="text" name="" id="namebox">
<label for="agebox">年龄</label>
<input type="text" name="" id="agebox">
<label for="humanclass">人类</label>
<label for="majinclass">魔人</label>
<input type="radio" name="class1" id="humanclass">
<input type="radio" name="class1" id="majinclass">
<input type="button" value="创建角色" id="creationbtn" onclick='char1.identify()'>
<input type="reset" value="取消">
</body>
class Charcreation {
constructor(name, age, charclass) {
this.name = name;
this.age = age;
this.class = charclass;
}
identify() {
console.log('我的名字是' + this.name + '，我今年' + this.age + '岁，是一个' + this.class)
}
}
charname = document.getElementById("namebox").value;
charage = document.getElementById('agebox').value;
charselection = document.getElementsByName('class1');
charclass = function getClass() {
for (i = 0; i < charselection.length; i++) {
if (charselection[i].checked)
return charselection[i].id;
}
}
char1 = new Charcreation(charname, charage, charclass())
char1.identify();
提前感谢。
英文:
I just started learning coding. and i was trying to apply the OOP pradigm to an example.
I am trying to create an object (the character here) and assign its properties as the values input within the html file.
the error that keeps appearing is 'javascript.js:14 Uncaught TypeError: Cannot read properties of null (reading 'value') .
<body>
<label for="namebox">Character Name</label>
<input type="text" name="" id="namebox">
<label for="agebox">Age</label>
<input type="text" name="" id="agebox">
<label for="humanclass">Human</label>
<label for="majinclass">Majin</label>
<input type="radio" name="class1" id="humanclass">
<input type="radio" name="class1" id="majinclass">
<input type="button" value="Create Character" id="creationbtn" onclick='char1.identify()'>
<input type="reset" value="Cancel">
</body>
class Charcreation {
constructor(name, age, charclass) {
this.name = name;
this.age = age;
this.class = charclass;
}
identify() {
console.log('my name is ' + this.name + ' and i am a ' + this.age + ' years old ' + this.class)
}
}
charname = document.getElementById("namebox").value;
charage = document.getElementById('agebox').value;
charselection = document.getElementByName('class1').value;
charclass =
function getClass() {
for (i == 0; i < charselection.length; i++) {
if (charselection[i].checked)
return charselection[i];
}
}
char1 = new Charcreation(charname, charage, charclass())
char1.identify();
Thanks in advance
答案1
得分: 1
这是你要的翻译：
There are a few errors in your code as @Chris G points out plus some others. Here's an update to your code with corrections to get a successful output for your `char1.identify();` method.
I've added some CSS styling that's not necessary to the output.
When the user clicks on the `#creationbtn` button, code execution needs to retrieve values of the form controls each time. Your original code is retrieving values of the `input` controls when the page is loaded and not each time the button is clicked.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
class Charcreation {
constructor(name, age, charclass) {
this.name = name;
this.age = age;
this.class = charclass;
}
identify() {
var identityText = 'my name is ' + this.name + ' and i am a ' + this.age + ' years old ' + this.class;
//console.log(identityText);
document.querySelector("#identity").textContent = identityText;
}
}
function createIdentity() {
var charname = document.getElementById("namebox").value;
var charage = document.getElementById('agebox').value;
var charselection = document.getElementsByName('class1');
var charclass =
function getClass() {
for (i = 0; i < charselection.length; i++) {
if (charselection[i].checked) {
var labelElem = document.querySelector("label[for=" + charselection[i].id + "]");
if (labelElem) {
return labelElem.textContent;
}
}
}
}
var char1 = new Charcreation(charname, charage, charclass());
char1.identify();
}
<!-- language: lang-css -->
#character-form {
display: grid;
width: 15rem;
}
.radio-control {
display: grid;
grid-auto-flow: column;
padding: .5rem 0;
width: fit-content;
}
.radio-control input {
margin: 0 .5rem;
}
<!-- language: lang-html -->
<div id="character-form">
<label for="namebox">Character Name</label>
<input type="text" name="" id="namebox">
<label for="agebox">Age</label>
<input type="text" name="" id="agebox">
<span class="radio-control">
<label for="humanclass">Human</label>
<input type="radio" name="class1" id="humanclass">
</span>
<span class="radio-control">
<label for="majinclass">Majin</label>
<input type="radio" name="class1" id="majinclass">
</span>
<input type="button" value="Create Character" id="creationbtn" onclick='createIdentity()'>
<input type="reset" value="Cancel">
<span id="identity"></span>
</div>
<!-- end snippet -->
希望这对你有帮助。
英文:
There are a few errors in your code as @Chris G points out plus some others. Here's an update to your code with corrections to get a successful output for your char1.identify(); method.
I've added some CSS styling that's not necessary to the output.
When the user clicks on the #creationbtn button, code execution needs to retrieve values of the form controls each time. Your original code is retrieving values of the input controls when the page is loaded and not each time the button is clicked.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
class Charcreation {
constructor(name, age, charclass) {
this.name = name;
this.age = age;
this.class = charclass;
}
identify() {
var identityText = 'my name is ' + this.name + ' and i am a ' + this.age + ' years old ' + this.class;
//console.log(identityText);
document.querySelector("#identity").textContent = identityText;
}
}
function createIdentity() {
var charname = document.getElementById("namebox").value;
var charage = document.getElementById('agebox').value;
var charselection = document.getElementsByName('class1');
var charclass =
function getClass() {
for (i = 0; i < charselection.length; i++) {
if (charselection[i].checked) {
var labelElem = document.querySelector("label[for=" + charselection[i].id + "]");
if (labelElem) {
return labelElem.textContent;
}
}
}
}
var char1 = new Charcreation(charname, charage, charclass());
char1.identify();
}
<!-- language: lang-css -->
#character-form {
display: grid;
width: 15rem;
}
.radio-control {
display: grid;
grid-auto-flow: column;
padding: .5rem 0;
width: fit-content;
}
.radio-control input {
margin: 0 .5rem;
}
<!-- language: lang-html -->
<div id="character-form">
<label for="namebox">Character Name</label>
<input type="text" name="" id="namebox">
<label for="agebox">Age</label>
<input type="text" name="" id="agebox">
<span class="radio-control">
<label for="humanclass">Human</label>
<input type="radio" name="class1" id="humanclass">
</span>
<span class="radio-control">
<label for="majinclass">Majin</label>
<input type="radio" name="class1" id="majinclass">
</span>
<input type="button" value="Create Character" id="creationbtn" onclick='createIdentity()'>
<input type="reset" value="Cancel">
<span id="identity"></span>
</div>
<!-- end snippet -->
答案2
得分: 0
错误信息一直出现的问题是 'javascript.js:14 Uncaught TypeError: Cannot read properties of null (reading 'value')。
您确定脚本在DOM渲染后触发了吗？可能是它在实际HTML渲染之前运行，这就是为什么.getElementById("namebox")返回null的原因。
可能有其他方法来确保这一点，但我知道最简单的方法是将脚本放在页脚而不是页眉中。
英文:
> the error that keeps appearing is 'javascript.js:14 Uncaught TypeError: Cannot read properties of null (reading 'value') .
Have you made sure that the script is firing after the DOM gets rendered?
It's possible that it is running before the actual HTML has been rendered and that is why .getElementById("namebox") is returning null.
There are probably other ways to ensure this, but the easiest I know of is just put the script inside of the footer instead of the header.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论