Jak updatovat obsah elementu – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Jak updatovat obsah elementu – JavaScript, AJAX, jQuery – Fórum – Programujte.comJak updatovat obsah elementu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
stirl021
~ Anonymní uživatel
6 příspěvků
26. 1. 2015   #1
-
0
-

Vytvářím jednoduchý kvíz v JavaScriptu.

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Quiz</title>

</head>
<body>
	
<h1>Chcete být milionářem</h1>

<script src="script2.js"></script>

<script>
createTemplate();
askQuestion();
</script>	
</body>
</html>

script2.js

var div;
var questionBox;
var choicesBox;
var buttonNext;
var scoreBox;
var questionNumber = 0;


questionBox = document.createElement('h3');
questionBox.setAttribute('id', 'questionbox')
choicesBox = document.createElement('form');
buttonNext = document.createElement('button');
scoreBox = document.createElement('p');

function createTemplate() {

	div = document.createElement('div');
	document.body.appendChild(div);
	div.appendChild(questionBox);
	div.appendChild(choicesBox);
	div.appendChild(buttonNext);
	div.appendChild(scoreBox);
}

function askQuestion() {
		
	appendQuestion();
	appendChoices();
	appendButtonNext();
}

function appendQuestion() {

	var text = document.createTextNode(questionList[questionNumber].question);
	var question = document.getElementById('questionbox');
	return question.appendChild(text);
}

function appendChoices() {
	
	for (var choice in questionList[questionNumber].choices) {
		
		var label = document.createElement('label');
		label.setAttribute('for', choice);

		var text = document.createTextNode(questionList[questionNumber].choices[choice]);
		label.appendChild(text);
		choicesBox.appendChild(label);
		
		var input = document.createElement('input');
		input.setAttribute('type', 'radio');
		input.setAttribute('id', choice);
		input.setAttribute('name', 'choice');
		
		choicesBox.appendChild(input);
	}

}

function appendButtonNext() {
	var text = document.createTextNode('Next question');
	buttonNext.setAttribute('onclick', 'nextQuestion();');
	buttonNext.appendChild(text);
}

function nextQuestion() {
	
	questionNumber++;
	removeContentBox();
	createTemplate();
	askQuestion();
}

function removeContentBox() {
	
	div.remove();
}


var questionList = [
{
question: "Kdo je premiérem Velké Británie?", 
choices: ["Tony Blair", "Gordon Brown", "Winston Churchill", "David Cameron"], 
correctAnswer:3,
},

{
question: "Jaká je nejdelší řeka světa?",
choices: ["Amazonka", "Rýn", "Nil", "Mississippi",] ,
correctAnswer: 0,
},

{
question: "Kdo je autorem Linuxu?",
choices: ["Bill Gates", "Linus Torvalds", "Liam Neeson", "Steve Jobs",] ,
correctAnswer: 1,
},

{
question: "Kolik kusů je tucet?",
choices: ["6", "12", "24", "48",] ,
correctAnswer: 1,
},

{
question: "Z čeho jsou žlučové kameny?",
choices: ["z hemoglobinu", "ze žluči", "z cholesterolu", "z vápníku",] ,
correctAnswer: 2,
},

{
question: "Jak se jmenuje předloha stavebnice Igráček?",
choices: ["Igláček", "Playmobil", "Juguete", "Malčik",] ,
correctAnswer: 1,
},

]

Klikem na button se napřed DIV s otázkou odstraní, pak by se měla vytvořit nová kostra DIVu funkcí createTemplate() a do ní by se měl připnout obsah nové otázky.

Místo toho se nová otázka přidává na tu předchozí, viz elementy h3 a form.

<html lang="en"><head>
	<meta charset="UTF-8">
	<title>Quiz</title>

</head>
<body>
	
<h1>Chcete být milionářem</h1>


<script src="script2.js"></script>
<script>
createTemplate();
askQuestion();
</script>	

<div><h3 id="questionbox">Kdo je premiérem Velké Británie?Jaká je nejdelší řeka světa?Kdo je autorem Linuxu?</h3><form><label for="0">Tony Blair</label><input type="radio" id="0" name="choice"><label for="1">Gordon Brown</label><input type="radio" id="1" name="choice"><label for="2">Winston Churchill</label><input type="radio" id="2" name="choice"><label for="3">David Cameron</label><input type="radio" id="3" name="choice"><label for="0">Amazonka</label><input type="radio" id="0" name="choice"><label for="1">Rýn</label><input type="radio" id="1" name="choice"><label for="2">Nil</label><input type="radio" id="2" name="choice"><label for="3">Mississippi</label><input type="radio" id="3" name="choice"><label for="0">Bill Gates</label><input type="radio" id="0" name="choice"><label for="1">Linus Torvalds</label><input type="radio" id="1" name="choice"><label for="2">Liam Neeson</label><input type="radio" id="2" name="choice"><label for="3">Steve Jobs</label><input type="radio" id="3" name="choice"></form><button onclick="nextQuestion();">Next questionNext questionNext question</button><p></p></div></body></html>
Nahlásit jako SPAM
IP: 109.164.76.–
Reklama
Reklama
peter
~ Anonymní uživatel
2547 příspěvků
27. 1. 2015   #2
-
0
-

http://jsfiddle.net/40d4t7Lv/

Proc nepouzijes innerHTML, kdyz DOM neumis? 

div = objekt;
div.a += '123'; //append node, pridat podobjekt
div.remove = true; // to jeste neznamena, ze to smaze objekt div, pouze jej odstrani z viditelnych.
alert(div)
alert(div.toSource())
div.a += '567'; // a '123' + '567' je? '123567'

Tudiz zcela logicky se vypise i predchozi text, protoze div zustal stejny objekt, nebyl prepsat pres create.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:2827:7b...–
peter
~ Anonymní uživatel
2547 příspěvků
27. 1. 2015   #3
-
0
-

Jo, totez pro ostatni prvky, ktere do toho divu pripojujes.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:2827:7b...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 14 hostů

Podobná vlákna

Jak zarovnat obsah JLabel — založil ViliX64

Jak vypsat obsah FTP serveru — založil Martin

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý