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

【问题标题】：How can I use a prompt's user input to update the page accordingly?如何使用提示的用户输入来相应地更新页面？
【发布时间】：2016-01-30 21:54:20
【问题描述】：

好的，所以在我的最后一个问题中，它说要将我的变量转换为我所做的字符串，但它仍然不起作用，因为在此之前我很难过，因为在此之前我很难过提示用户将在那里设置情绪的地方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>

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

【问题讨论】：

看起来他们给了你糟糕的建议。将输入解析为整数并使用大于和小于运算符检查是否包含
@Jeremy 所以基本上我会 var x = parseInt(Prompt("What is your mood?"); ?? 但是你用小于或大于包含是什么意思请给我一个可能有效的代码示例。然后解析输入，我将不得不取消引用来自 sad n1 和 h1 的所有变量，对吗？

标签： javascript html image variables prompt

【解决方案1】：

首先，您尝试在页面加载之前访问 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 :)
}

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

【讨论】：