Verwenden Random Number Ändern HTML

-2

What is wrong with this JavaScript? It should work, but after testing it, it does not! What am I doing wrong? When I test this in Chrome the console errors are: "index.html:129 Uncaught SyntaxError: Unexpected end of input" and "index.html:43 Uncaught TypeError: response is not a function at HTMLButtonElement.onclick" What is the fix to these errors in relation to the script below?Verwenden Random Number Ändern HTML

<style> 
body { 
background-color: black; 
font-family: 'courier new'; 
} 
.yellow { 
font-family: 'courier new'; 
font-weight: bold; 
color: yellow; 
} 
.red { 
font-family: 'courier new'; 
font-weight: bold; 
color: red; 
} 
.green { 
font-family: 'courier new'; 
font-weight: bold; 
color: green; 
} 
h1, .h2 { 
color: white; 
font-family: 'courier new'; 
} 
p, h2 { 
color: white; 
font-family: 'courier new'; 
line-height: 150%; 
} 
button { 
display: inline-block; 
cursor: pointer; 
} 
</style> 
</head> 
<body> 
<h1>8-Ball</h1> 
<p>These are the normal answers you'd expect from an 8-ball! 
<br>Ask a yes or no question and 
<button onclick="response()">Refresh!</button> 
for a different answer.</p> 
<h2 class="h2" id="response"></h2> 
<script type="text/javascript"> 
function response(){ 
var randnum; 
randnum = Math.floor((Math.random() * 20) + 1); 
//8-ball Icosahedron Answers 
if (randnum == 1) { 
document.getElementById("response").setAttribute("class", "green"); 
document.getElementById("response").innerHTML = "Signs point to yes."; 
} 
if (randnum == 2) { 
document.getElementById("response").setAttribute("class", "green"); 
document.getElementById("response").innerHTML = "Yes."; 
} 
if (randnum == 3) { 
document.getElementById("response").setAttribute("class", "yellow"); 
document.getElementById("response").innerHTML = "Reply hazy, try again."; 
} 
if (randnum == 4) { 
document.getElementById("response").setAttribute("class", "green"); 
document.getElementById("response").innerHTML = "Without a doubt."; 
} 
if (randnum == 5) { 
document.getElementById("response").setAttribute("class", "red"); 
document.getElementById("response").innerHTML = "My sources say no."; 
} 
if (randnum == 6) { 
document.getElementById("response").setAttribute("class", "green"); 
document.getElementById("response").innerHTML = "As I see it, yes."; 
} 
if (randnum == 7) { 
document.getElementById("response").setAttribute("class", "green"); 
document.getElementById("response").innerHTML = "You may rely on it."; 
} 
if (randnum == 8) { 
document.getElementById("response").setAttribute("class", "yellow"); 
document.getElementById("response").innerHTML = "Concentrate and ask again."; 
} 
if (randnum == 9) { 
document.getElementById("response").setAttribute("class", "yellow"); 
document.getElementById("response").innerHTML = "Outlook not so good."; 
} 
if (randnum == 10) { 
document.getElementById("response").setAttribute("class", "green"); 
document.getElementById("response").innerHTML = "It is decidedly so."; 
} 
if (randnum == 11) { 
document.getElementById("response").setAttribute("class", "yellow"); 
document.getElementById("response").innerHTML = "Better not tell you now."; 
} 
if (randnum == 12) { 
document.getElementById("response").setAttribute("class", "red"); 
document.getElementById("response").innerHTML = "Very doubtful."; 
} 
if (randnum == 13) { 
document.getElementById("response").setAttribute("class", "green"); 
document.getElementById("response").innerHTML = "Yes - definitely."; 
} 
if (randnum == 14) { 
document.getElementById("response").setAttribute("class", "green"); 
document.getElementById("response").innerHTML = "It is certain."; 
} 
if (randnum == 15) { 
document.getElementById("response").setAttribute("class", "yellow"); 
document.getElementById("response").innerHTML = "Cannot predict now."; 
} 
if (randnum == 16) { 
document.getElementById("response").setAttribute("class", "green"); 
document.getElementById("response").innerHTML = "Most likely."; 
} 
if (randnum == 17) { 
document.getElementById("response").setAttribute("class", "yellow"); 
document.getElementById("response").innerHTML = "Ask again later."; 
} 
if (randnum == 18) { 
document.getElementById("response").setAttribute("class", "red"); 
document.getElementById("response").innerHTML = "My reply is no."; 
} 
if (randnum == 19) { 
document.getElementById("response").setAttribute("class", "green"); 
document.getElementById("response").innerHTML = "Outlook good."; 
} 
if (randnum == 20) { 
document.getElementById("response").setAttribute("class", "yellow"); 
document.getElementById("response").innerHTML = "Don\'t count on it."; 
} 
</script>

Quelle

2017-02-12 Henry7720

Sie Ihre Zufallszahl in 'randnumber', die ersten 2'Erstellen Wenn die Statements gut funktionieren (Klasse und Text setzen), haben die anderen plötzlich die undefinierte Variable 'randnum' in der Bedingung, setzen kein Klassenattribut oder innerHTML (nur Log auf die Konsole) .... Untersuchen Sie, was sich unterscheidet die ersten 2 ifs und die anderen 17 und du wirst auf dem Weg sein ... – ccKep

Also, sagst du, wenn ich den Rest des Skripts auf die gleiche Weise wie die ersten 2 formatiere? Das Skript funktioniert? – Henry7720

Warum überprüfen Sie nicht die Antwort? Ich habe mich bemüht, Ihren Code zu schreiben – imudin07

Sie haben gleiche Variable zu verwenden, eine dieser randnum oder randnumber:

Hier arbeitet Beispiel: https://jsfiddle.net/baLbLxse/

FÜR BESSERE ERFAHRUNG:

1) Sie verwenden besser nur Zahlen, nicht wie '3';

2) warum verwenden Sie nicht Array? Sie können alle in einem Array speichern und Array-Element mit zufälligen Index wie diese erhalten, answers[randnum]:

var answers = [ 
     { 
     color: 'green', 
     text: "Signs point to yes." 
     }, 
     { 
     color: 'green', 
     text: "Yes." 
     }, 
     ... 
    ]; 

function response() { 
    var randnum = Math.floor((Math.random() * answers.length)); 
    //8-Ball Icosahedron Answers 
    document.getElementById("response").setAttribute("class", answers[randnum].color); 
    document.getElementById("response").innerHTML = answers[randnum].text; 
    }

Empfohlene Version ist hier: https://jsfiddle.net/baLbLxse/3/

Quelle

2017-02-12 03:09:43 imudin07

Kleiner Vorschlag: Könnte auch 'answers.length' anstelle von' 20 'hardcoding verwenden. – ccKep

Ja richtig! Vielen Dank – imudin07

Verwenden Random Number Ändern HTML

Antwort

Verwandte Themen