如何解决单击某些复选框后,如何使javascript中的字符串显示在html中?
所以我也想从一开始就说我是Web开发的新手,特别是javascript。我正在尝试构建一个简单的程序,在该程序中您从视频游戏的某些成分列表中检查某些项目,然后告诉您可以制作哪些食谱。选中复选框时,我很难使文本显示在html中。
这是我的html,其中的一种成分可以仅由一项制成食谱:
<div>
<input type="checkbox" id="egg" name="egg">
<label for="egg">Egg</label>
</div>
这是我试图使食谱显示在ID为“ make”的段落的复选框下方的javascript:
if (document.getElementById("egg").checked === true) {
document.getElementById("make").innerHTML = "You can make a fried egg with egg!";
}
解决方法
欢迎堆栈溢出!希望您在这里找到有用的答案!
当您单击复选框时,您似乎正在尝试更改页面上呈现的HTML。
上述片段的问题在于它只能运行一次,因此您可能需要监听事件。
对于一个新开发人员来说,事件是一个全新的世界-但请放心,您知道了!
基本上,事件是发生事情的信号。因此,单击复选框时,需要一段代码才能触发。如果您使用的是本机JavaScript,则可能是这样的:
const el = document.getElementById("egg");
el.addEventListener("click",ev => {
const message = el.checked
? "You can make a fried egg with egg!"
: "You can't make fried eggs at all!";
document.getElementById("make").innerHTML = message;
});
现在,每次单击“ egg”元素,上面的代码都会运行,从而更新“ make”元素的内部html。
,要使其正常工作,您需要在复选框上放置一个事件侦听器(只是一个常用函数),该事件侦听器将处理输入值的每次更改,并取决于此值是true
还是{{ 1}},您可以更新输出的值。
您可以运行代码段并查看实现细节。
false
function updateResult(checkbox) {
const make = document.getElementById("make");
make.innerHTML = checkbox.checked === true
? "You can make a fried egg with egg!"
: "";
}
,
您几乎在正确的轨道上。但是,只会运行一次(并立即),因此不会产生任何结果。对于此“ bind
”,事件监听器。这将确保每次单击复选框时,都会执行您定义的函数。像这样-
const check_box = document.getElementById("egg");
// this function decides what message to set and shows it
function cbClicked(event){
let message = "";
//check if box checked
if(check_box.checked) {
message = "You can make a fried egg with egg!";
}
//box not checked
else {
message = "You can't make fried eggs at all!";
}
//set message
document.getElementById("make").innerHTML = message;
}
//add an eventlistener by telling what 'even' to listen for
// and what function to run
check_box.addEventListener("click",cbClicked);
<div>
<input type="checkbox" id="egg" name="egg">
<label for="egg">Egg</label>
</div>
<div id="make"></div>
注意如何将函数作为参数传递给.addEventListener()
,这是可能的,而且也是完全正常的。传递的函数称为回调函数。您甚至可以完全{strong>内部定义.addEventListener()
,在这种情况下,您甚至不需要为该函数设置名称,例如-
.addEventListener('event_name',function(event){
//body of function
})
第一个参数event
是发生的事件,由事件处理程序自动传递。我在这里没有用它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。