Html 通过开关盒引用时未在JS中加载图像_Html_Image_Switch Statement_Src

Html 通过开关盒引用时未在JS中加载图像

html image

Html 通过开关盒引用时未在JS中加载图像,html,image,switch-statement,src,Html,Image,Switch Statement,Src,因此，我有一个测验，根据一个和值，一个带有你的角色的图像将被附加到显示结果的段落中，我的问题是图像不会加载。我知道代码可以工作，但直到console.log（sum）出现，因为它是在浏览器中加载文件时记录的我将在下面发布我的代码（这是Javascript和html） HTML: <body> <h1>Which Star Wars Character Are You?</h1> <form> What color is your

因此，我有一个测验，根据一个和值，一个带有你的角色的图像将被附加到显示结果的段落中，我的问题是图像不会加载。我知道代码可以工作，但直到console.log（sum）出现，因为它是在浏览器中加载文件时记录的

我将在下面发布我的代码（这是Javascript和html）

HTML:

<body>
  <h1>Which Star Wars Character Are You?</h1>
  <form>
    What color is your Lightsaber?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Red</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Blue</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Purple</label>
    </blockquote>
  </form>
  <form>
    With which organization would you most likely aligned?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Empire</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Rebel Alliance</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Neither</label> 
    </blockquote>
  </form>
  <form>
    Do you submit to the Emperor's will?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Yes</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Maybe</label> 
    </blockquote>
  </form>
  <form>
    Would you help a friend if it meant being sealed in carbonite?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No of course not</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes, I want to save my friends</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Depends on the friend</label> 
    </blockquote>
  </form>
  <form>
    Do you like Wookies?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Only as a tool to crush my enemies</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes I consider the creatures as friends</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I've met a few good Wookies in my time, a few hostile ones     too</label> 
    </blockquote>
  </form>
  <form>
    Would you ever construct a Droid Army to usurp the Empire's power?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No, the Empire must be upheld, always</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No, using an Army of Droids would make us just as bad</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Yes, absolutely</label> 
    </blockquote>
  </form>
  <form>
    Jar Jar Binks yay or nay?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Yay</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">My father liked Jar Jar</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Nay, a thousand times, Nay</label> 
    </blockquote>
  </form>
  <form>
    Have you seen the Mr. Plinkett Star Wars Reviews?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">I've heard of them</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Yes, he is right on all points raised</label> 
    </blockquote>
  </form>
  <form>
    Would you build a DeathStar or something like it to assert dominance over   the Galaxy?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Yes, maybe even 2 times</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No, the DeathStar is a war machine that must be destroyed</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I would possible use such a machine or vessel for my goals</label> 
    </blockquote>
  </form>
  <form>
    Did you like/know of KOTOR 1 or 2
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I liked KOTO2 but KOTOR 1 had a lame ending.</label> 
    </blockquote>
    <br><br><input type="button" id="qButton" value="Choose">
  </form>
  <p id="QuestionParagraph"></p>
</body>

body {
    background-color: #0000ff;
}
h1 {
    color: black;
    text-align: center;
}
p {
    font-family: "Arial";
    font-size: 25px;
    text-align: center;
}
.house {
    max-width: 200px;
    width: 100%;
}

function getButton() {
    var button = document.getElementById('qButton');
    button.onclick = getResult;
}

function getResult() {

    var sum = 0;
    var inputs = document.getElementsByName('lightsaber');
    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            sum += parseInt(inputs[i].value);
            console.log(sum);
            showChar(sum);
        }
    }
}

function showChar(sum) {

    var image = document.createElement('img');
    image.className = 'lightsaber';
    var source = document.getElementById('QuestionParagraph');

    switch (sum) {
        case (sum <= 12):
            image.src = 'http://www.hp-lexicon.org/images/icons/shield_sly.jpg';
            break;
        case (13 <= sum <= 17):
            image.src = 'http://www.hp-lexicon.org/images/icons/shield_01-5B1-5D.jpg';
            break;
        case (18 <= sum <= 30):
            image.src = 'http://www.hp-lexicon.org/images/icons/shield_huf.jpg';
            break;
        default:
            image.src = '';
            source.appendChild(image);
    }
}

window.onload = getButton;

JS:

<body>
  <h1>Which Star Wars Character Are You?</h1>
  <form>
    What color is your Lightsaber?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Red</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Blue</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Purple</label>
    </blockquote>
  </form>
  <form>
    With which organization would you most likely aligned?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Empire</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Rebel Alliance</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Neither</label> 
    </blockquote>
  </form>
  <form>
    Do you submit to the Emperor's will?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Yes</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Maybe</label> 
    </blockquote>
  </form>
  <form>
    Would you help a friend if it meant being sealed in carbonite?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No of course not</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes, I want to save my friends</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Depends on the friend</label> 
    </blockquote>
  </form>
  <form>
    Do you like Wookies?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Only as a tool to crush my enemies</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes I consider the creatures as friends</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I've met a few good Wookies in my time, a few hostile ones     too</label> 
    </blockquote>
  </form>
  <form>
    Would you ever construct a Droid Army to usurp the Empire's power?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No, the Empire must be upheld, always</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No, using an Army of Droids would make us just as bad</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Yes, absolutely</label> 
    </blockquote>
  </form>
  <form>
    Jar Jar Binks yay or nay?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Yay</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">My father liked Jar Jar</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Nay, a thousand times, Nay</label> 
    </blockquote>
  </form>
  <form>
    Have you seen the Mr. Plinkett Star Wars Reviews?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">I've heard of them</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">Yes, he is right on all points raised</label> 
    </blockquote>
  </form>
  <form>
    Would you build a DeathStar or something like it to assert dominance over   the Galaxy?
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">Yes, maybe even 2 times</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">No, the DeathStar is a war machine that must be destroyed</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I would possible use such a machine or vessel for my goals</label> 
    </blockquote>
  </form>
  <form>
    Did you like/know of KOTOR 1 or 2
    <blockquote>
      <br><input type="radio" name="lightsaber" id="red" value="1"> <label  for="red">No</label> 
      <br><input type="radio" name="lightsaber" id="blue" value="2"> <label     for="blue">Yes</label> 
      <br><input type="radio" name="lightsaber" id="purple" value="3"> <label   for="purple">I liked KOTO2 but KOTOR 1 had a lame ending.</label> 
    </blockquote>
    <br><br><input type="button" id="qButton" value="Choose">
  </form>
  <p id="QuestionParagraph"></p>
</body>

body {
    background-color: #0000ff;
}
h1 {
    color: black;
    text-align: center;
}
p {
    font-family: "Arial";
    font-size: 25px;
    text-align: center;
}
.house {
    max-width: 200px;
    width: 100%;
}

function getButton() {
    var button = document.getElementById('qButton');
    button.onclick = getResult;
}

function getResult() {

    var sum = 0;
    var inputs = document.getElementsByName('lightsaber');
    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            sum += parseInt(inputs[i].value);
            console.log(sum);
            showChar(sum);
        }
    }
}

function showChar(sum) {

    var image = document.createElement('img');
    image.className = 'lightsaber';
    var source = document.getElementById('QuestionParagraph');

    switch (sum) {
        case (sum <= 12):
            image.src = 'http://www.hp-lexicon.org/images/icons/shield_sly.jpg';
            break;
        case (13 <= sum <= 17):
            image.src = 'http://www.hp-lexicon.org/images/icons/shield_01-5B1-5D.jpg';
            break;
        case (18 <= sum <= 30):
            image.src = 'http://www.hp-lexicon.org/images/icons/shield_huf.jpg';
            break;
        default:
            image.src = '';
            source.appendChild(image);
    }
}

window.onload = getButton;

函数getButton（）{ var-button=document.getElementById（'qButton'）； button.onclick=getResult； } 函数getResult（）{ var总和=0； var inputs=document.getElementsByName（'lightsaber'）；对于（i=0；icase（sum如果您真的想使用开关（而不是If-else构造），将条件

sum

替换为

true

。此外，您的

源代码.appendChild

位于开关内部，因此只有当开关大小写变为默认值时才会执行。我猜您希望它始终执行，因此将其置于开关外部

例如：

switch(true){
    case (sum<=12):
        image.src = 'http://www.hp-lexicon.org/images/icons/shield_sly.jpg';
        break;
    case (13<=sum<=17):
        image.src = 'http://www.hp-lexicon.org/images/icons/shield_01-5B1-5D.jpg';
        break;
    case (18<=sum<=30):
        image.src = 'http://www.hp-lexicon.org/images/icons/shield_huf.jpg';
        break;
    default:
        image.src = '';
}
source.appendChild(image);

工作版本：

（可能有多个图像）
（使用上述建议的修复）

我可以建议您更改为

if/then/else

，然后像下面的示例代码片段那样执行此操作

通过开始使用像

var img={…}

这样的对象，您将能够使您的解决方案更加动态，您还可以以类似的方式处理您的问题和回答

var qp=document.getElementById（'question段落'）；
var img={
12: 'http://www.hp-lexicon.org/images/icons/shield_sly.jpg',
17: 'http://www.hp-lexicon.org/images/icons/shield_01-5B1-5D.jpg',
30: 'http://www.hp-lexicon.org/images/icons/shield_huf.jpg'
}
函数getButton（）{
var-button=document.getElementById（'qButton'）；
button.onclick=getResult；
}
函数getResult（）{
var总和=0；
var inputs=document.getElementsByName（'lightsaber'）；
对于（i=0；ithanks）这是可行的，我唯一的问题是，图片以每次总和递增的方式打印，我需要它在最后只显示一次结果。我想这就是为什么每个输入都有相同的名称使事情变得困难。