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

How can I use a prompt's user input to update the page accordingly?

本文关键字：更新 提示 何使用 用户 输入      更新时间：2023-09-26

好的，所以在我的最后一个问题中，它说将我的变量变成字符串，我做到了，但它仍然不起作用，因为我在这一点之前很难过，提示 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。这是一个类似数组的对象，因此您必须通过 document.getElementsByTagName('img')[0] 访问要定位的img元素。

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

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 :)
}

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

相关文章：