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

Question

好的，所以在我的最后一个问题中，它说要将我的变量转换为字符串，我这样做了，但它仍然不起作用，因为我很难过，在此之前我很难过要让提示符出现在用户将在那里设置的地方情绪从 1 到 10。如果他们在 1-3 之间选择，图像将是悲伤脸，4-7 是中性脸，8-10 是快乐脸。但它不工作提示出现但它仍然不工作 javascript 已被放置在 header:

    </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>

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

Answer 1

首先，您试图在页面加载之前访问 DOM（文档对象模型），因此还没有 HTML 处于活动状态。换句话说，您正在与空白页面进行交互。您必须将脚本放在 </body> 标签之前（这确保 <script> 标签上方的所有 HTML 都处于活动状态并且已在 DOM 中更新）或检查页面已加载。

我在这里看到的第二个问题是您使用的函数不存在：getElementByTagName。该函数是 getElementsByTagName，它 return 是一个 HTML 集合。这是一个类似数组的对象，因此您必须通过 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 :)
}

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

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

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

javascript

html

image

variables

prompt