gpt4 book ai didi

javascript - 如何使用提示的用户输入来相应地更新页面?

转载 作者:行者123 更新时间:2023-11-28 06:26:14 25 4
gpt4 key购买 nike

好吧,在我的上一个问题中,它说将我的变量变成我所做的字符串,但它仍然不起作用,因为我在这之前感到难过的是,在用户将在其中设置心情的提示coe之前1-10。如果他们在 1-3 之间选择,图像将是悲伤的脸、4-7 中性的脸和 8-10 快乐的脸。但它不起作用提示显示但它仍然不起作用JavaScript已放置在标题中:

    </head>
<script>
var sad = "1",
sad2 = "2",
sad3 = "3";
var n1 = "4",
n2 = "5",
n3 = "6",
n4 = "7";
var h1 = "8",
h2 = "9",
h3 = "10";

var x = prompt("What is your mood from 1-10? 1 being sad, 10 being Happy.");

if (x === sad || x === sad2 || x === sad3){
document.getElementByTagName("img").src = "sad.png";
document.getElementById("msg").innerHTML = "Sad.";
document.getElementById("msg").href = "http://www.sad.com";
}
else if (x === n1 || x === n2 || x === n3 || x === n4){
document.getElementByTagName("img").src = "sad.png";
document.getElementById("msg").innerHTML = "Neutral.";
document.getElementById("msg").href = "http://www.neutral.com";
}
else if (x === h1 || x === h2 || x === h3){
document.getElementByTagName("img").src = "happy.png";
document.getElementById("msg").innerHTML = "Happy.";
document.getElementById("msg").href = "http://www.happy.com";
}
</script>
</head>
<body style="text-align:center">
<img src="neutral.png">
<h1><a id="msg" href="">Waiting...</a></h1>
</body>

请告诉我我做错了什么,这里一切都没有错误,但我的输出图像保持中立,如果有人可以尝试这个项目并测试它并证明它有效,请向我发送代码。

最佳答案

首先,您尝试在页面加载之前访问 DOM(文档对象模型),因此还没有 HTML 处于事件状态。换句话说,您正在与空白页面交互。您必须将脚本放在 </body> 之前标签(确保 <script> 标签上方的所有 HTML 均处于事件状态并已在 DOM 中更新)或检查页面是否已加载。

我在这里看到的第二个问题是您使用的函数不存在:getElementByTagName 。函数为getElementsByTagName ,并且它返回一个 HTMLCollection。这是一个类似数组的对象,因此您必须访问 img您通过 document.getElementsByTagName('img')[0] 定位的元素.

上面的两个更改应该使脚本按照您想要的方式运行,但我将建议另一个修改。我不会将输入作为字符串处理,而是首先将其解析为整数,然后检查该整数是否包含在给定范围内。例如:

var x = prompt( "What is your mood from 1-10? 1 being sad, 10 being Happy." );

x = parseInt( x );

if ( x <= 3 ) {
// sad :(
} else if ( x <= 7 ) {
// neutral :|
} else if ( x <= 10 ) {
// happy :)
}

上面,我提示用户,然后将输入转换为整数。为了检查要返回哪种情绪,我使用 <=比较运算符。

关于javascript - 如何使用提示的用户输入来相应地更新页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35107597/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com