所以我有一个测验，根据一个和值，一个带有你角色的图像将附加到显示结果的段落，我的问题是图像不会加载。我知道代码有效但直到console.log （总和）因为在浏览器中加载文件时会记录它。
我将在下面发布我的代码（这是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>
CSS：
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%;
}
JS：
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;
答案 0 :(得分：0)
如果您确实想使用开关（而不是if-else构造），请将条件sum替换为true。此外，您的source.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);
最后，通过始终创建图像，您可能最终得到多个图像结果。为避免这种情况，您可以在showChar：
var image = document.getElementById('imgResult');
if (!image) {
image = document.createElement('img');
image.id = "imgResult";
image.className = 'lightsaber';
}
工作版本：
答案 1 :(得分：0)
我建议您更改为if/then/else并执行此操作，例如下面的示例代码段。
通过开始使用var img = {...}之类的对象，您将能够使您的解决方案更具动态性，您也可以以类似的方式处理问题和答案。
var qp = document.getElementById('QuestionParagraph');
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'
}
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 appendImage(src,trg){
var image = document.createElement('img');
image.className = 'lightsaber';
image.src = src;
trg.appendChild(image);
}
function showChar(sum){
if (sum <= 12) {
appendImage(img[12],qp);
} else if (sum <= 17) {
appendImage(img[17],qp);
} else if (sum <= 30) {
appendImage(img[30],qp);
}
}
window.onload = getButton;body {
background-color: #06f;
}
h1 {
color: black;
text-align: center;
}
p {
font-family: "Arial";
font-size: 25px;
text-align: center;
}
.house {
max-width: 200px;
width: 100%;
}<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>