Javascript 如何使用提示符'；用户输入以相应地更新页面？_Javascript_Html_Image_Variables_Prompt

Javascript 如何使用提示符'；用户输入以相应地更新页面？

javascript html image variables

Javascript 如何使用提示符'；用户输入以相应地更新页面？,javascript,html,image,variables,prompt,Javascript,Html,Image,Variables,Prompt,好的，在我的最后一个问题中，它说把我的变量转换成字符串，我做了，但它仍然不起作用，因为在这之前，我很难过，要设置提示coe，用户将在那里设置1-10的情绪。如果他们选择1-3，图像将是sadface、4-7中性面和8-10快乐面。但它不起作用提示出现但仍然不起作用javascript已放置在标题中： </head> <script> var sad = "1", sad2 = "2", sad

好的，在我的最后一个问题中，它说把我的变量转换成字符串，我做了，但它仍然不起作用，因为在这之前，我很难过，要设置提示coe，用户将在那里设置1-10的情绪。如果他们选择1-3，图像将是sadface、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>


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=提示（“1-10岁时你的情绪如何？1是悲伤的，10是快乐的”）；
如果（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";
} 
如果（x==n1 | | x==n2 | | x==n3 | | x==n4）{
document.getElementByTagName（“img”）.src=“sad.png”；
document.getElementById（“msg”）.innerHTML=“中立。”；
document.getElementById（“msg”）.href=”http://www.neutral.com";
} 
else如果（x==h1 | | x==h2 | | x==h3）{
document.getElementByTagName（“img”）.src=“happy.png”；
document.getElementById（“msg”）.innerHTML=“快乐。”；
document.getElementById（“msg”）.href=”http://www.happy.com";
}

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

首先，你试图访问DOM（文档对象模型）之前，页面加载，所以没有HTML是活的。换句话说，您正在与一个空白页面交互。您必须将脚本放在

标记之前（这确保

标记上方的所有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 :)
}

var x=prompt（“1-10岁时你的情绪如何？1是悲伤，10是快乐”）；
x=parseInt（x）；
如果（x首先，您试图在加载页面之前访问DOM（文档对象模型），因此没有HTML处于活动状态。换句话说，您正在与空白页面交互。您必须将脚本放在
标记之前（这确保
标记上方的所有HTML处于活动状态，并且在DOM中已更新）或者检查页面是否已加载
我在这里看到的第二个问题是，您正在使用一个不存在的函数：getElementByTagName
。该函数是getElementsByTagName
，它返回一个HTMLCollection。这是一个类似数组的对象，因此您必须访问document.getElementsByTagName（'img'）所针对的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 :)
}

var x=prompt（“1-10岁时你的情绪如何？1是悲伤，10是快乐”）；
x=parseInt（x）；
如果（x），看起来他们给了你糟糕的建议。将输入解析为整数，并使用大于和小于检查是否包含operators@Jeremy因此，基本上我需要var x=parseInt（提示（“你的心情如何？”）？那么，使用小于等于或大于等于是什么意思？请给我一个可能有效的代码示例。解析输入时，我必须从sad n1和h1中取消引用所有变量，对吗？看起来他们给了你很糟糕的建议。将输入解析为整数，并使用大于a的值检查是否包含nd小于operators@Jeremy所以基本上我会使用var x=parseInt（提示（“你的心情是什么？”）；？，但是你使用小于等于等于大于等于的方法来包含是什么意思请给我一个可能有效的代码示例。然后解析输入，我将不得不取消引用sad n1和h1中的所有变量，对吗？