0
J'ai cherché en ligne mais je n'ai pas trouvé beaucoup de choses utiles.Saisie de variables Javascript dans innerHTML
J'ai fait un petit quiz en anglais. Après chaque section de difficulté, je veux que Javascript entre dans innerHTML et entre le score de variable dans innerHTML. Voici ce que je devais commencer par:
function eqs() {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: '+score+'."}
Cela n'a pas montré quoi que ce soit dans le jumbotron bootstrap que je voulais.
je l'ai changé un peu:
function eqs() {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + score + "."}
Cette fois-ci, il apparaît 011111111.
Tout le code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
background-color: red;
color: white;
font-family: 'Open Sans', Arial;
margin: auto;
margin-top: 20px;
max-width: 1160px;
}
.jumbotron {background-color: #ff4d4d;}
.btn {width: 100%;}
</style>
<script>
\t $(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});
var score = "0";
var seconds = "0";
function add1() {score += 1};
function add2() {score += 2};
function add3() {score += 3};
function eqs() {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + score + "."}
</script>
<title>Year 7 English Quiz - Are you smarter than an 11 year old?</title>
</head>
<body>
<div class="container">
\t <h1>Year 7 English Quiz - Are you smarter than an 11 year old?</h1><hr>
\t <h3>Rules: (Read before playing)</h3>
\t <p>'-' Means fill in the blank with a word</p>
\t <p>'|' Means fill in the blank with a phrase</p>
\t <p>'+' Means complete the word</p>
\t <p>There are 33 questions in this quiz.</p>
\t <p>By hitting the timer to the bottom, you can challenge yourself and see how quick you could complete the quiz.</p>
\t <p>11 will be a set of easy questions, another 11 will be a set of medium questions and the last 11 will be hard/or virtually impossible for a Year 7 to figure out.</p>
<p>These difficulty levels only apply to Year 7s. A hard question could be simple to you.</p>
\t <p>Have fun and don't get mad if you don't pass the test. If you fail, then that doesn't necessarily bad at English!</p>
\t <p>Don't click a button two times during a quiz unless you want to mess everything up. But I know you're probably a rebel.</p>
\t <p>Scroll down after each question, as some may not show on your screen and will be below</p>
\t <p>At the end, your points will be tallied up. Through hard, you will receive negative points for answering a question incorrectly.</p>
\t <button class="btn btn-default" onclick="stopwatch">Stopwatch</button>
\t <span data-toggle="collapse" data-target="#q1" id="disableoc"><button type="button" class="btn btn-default"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chill Out M8">Just get to the questions already!</a></button></span><hr>
\t <div id="q1" class="collapse">
\t \t <h1>Easy Questions:</h1><br>
\t \t <div class="jumbotron"><h1 class="question">Question 1: When is _ birthday?</h1></div>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 1: Your</button>
\t \t <button onclick="minus1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 2: You're</button><hr>
\t </div>
\t <div id="q2" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 2: +ranky</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 1: Kranky</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 2: Cranky</button><hr>
\t </div>
\t <div id="q3" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 3: Spot the word class that doesn't exist.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 1: Determiner</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 2: Verb</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 3: Noun</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 4: Preposition</button>
<button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 5: Proverb</button>
<button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 6: Adjective</button><hr>
\t </div>
\t <div id="q4" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 4: It's - cats and dogs.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 1: Pouring</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 2: Raining</button><hr>
\t </div>
\t <div id="q5" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 5: +yclone</h1></div>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 1: Cyclone</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 2: Syclone</button><hr>
\t </div>
\t <div id="q6" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 6: I - cheeseburger.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 1: Haz</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 2: Have</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 3: Has a</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 4: Have a</button><hr>
\t </div>
\t <div id="q7" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 7: Find the tense of the following sentence: I located my nearest barber.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 1: Present</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 2: Simple</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 3: Continuous</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 4: Past</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 5: Future</button><hr>
\t </div>
\t <div id="q8" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 8: - the remote control.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 1: Gimme</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 2: Give me</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 3: Gave me</button><hr>
\t </div>
\t <div id="q9" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 9: What is the closest definition to a synonym?</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 1: A word used to describe a verb</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 2: A group of words that acts in the same way as a participle</button><br>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A word that is similar if not identical to another word</button><hr>
\t </div>
\t <div id="q10" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 10: What is the closest definition to a noun phrase?</h1></div>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 1: Answer 2 but the noun *must* be either a subject or object</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 2: A phrase with 1 or more noun(s) in it</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A noun that also acts a phrase</button><hr>
\t </div>
\t <div id="q11" class="collapse">
\t \t <div class="jumbotron"><h1 class="question">Question 11: The he was entirely - in frozen carbonite.</h1></div>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 1: Encasted</button>
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 2: Encapsulated</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 3: Capsulated</button>
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 4: Capered</button><hr>
\t </div>
\t <div id="eqsummary" class="collapse">
\t <div class="jumbotron"><h1 id="sum1"></h1></div>
\t </div>
\t </div>
</body>
</html>
Veuillez lire [Comment créer un exemple minimal, complet et vérifiable] (http://stackoverflow.com/help/mcve). En réduisant votre code au cœur du problème, vous pourriez trouver la raison avant même de poster la question. Si vous ne le trouvez pas, vous aurez une question beaucoup plus claire qui sera traitée plus rapidement. – Pharaoh