Change div content by clicking a word/link with Javascript - javascript

I am basically trying to have a word (page 2) be clickable and act as a link to display different div content. When they select option 2, then click the next button, they should be able to click "Page 2" test and cause that to display the id="test1" (Choice 1, Page 1) content. I have tried a few variables but haven't been able to get any to work. The best I could do is get it to take you back to the choice options, but I'd like to eliminate any users error and just go straight to the first page of the choice they should have made.
Any help would be grateful. And sorry, JQuery is not an option.
<!DOCTYPE html>
<html>
<center>
<head>
<title>Test2</title>
<script>
function formReset()
{
document.getElementById("home").innerHTML ="";
document.getElementById("main").style.display = 'block';
document.getElementById("1").checked = false;
document.getElementById("2").checked = false;
}
function nextPage()
{
if (document.getElementById("1").checked == true){
document.getElementById("home").innerHTML = document.getElementById("test1").innerHTML;
document.getElementById("main").style.display = 'none';
}
else
if (document.getElementById("2").checked == true){
document.getElementById("home").innerHTML = document.getElementById("test2").innerHTML;
document.getElementById("main").style.display = 'none';
}
return true;
}
function otherPage()
{
switch (document.getElementById('home').innerHTML)
{
case document.getElementById("test2").innerHTML:
(document.getElementById("home").innerHTML = document.getElementById("choice2_page2").innerHTML)
break;
}
}
</script>
</head>
<body>
<h1>This is a test of the radio buttons</h1>
<br />
<div>
<form>
<div id="home"></div>
<div id="main">
<input type="radio" name="grp1" id="1">1<br>
<input type="radio" name="grp1" id="2">2<br>
<br />
<input type="button" name="button" value="Next" onClick="nextPage()">
</div>
</form>
</div>
<div name="test1" id="test1" style="display:none"><!-- Display this content -->
<h2>Choice 1<br>Page 1</h2>
<input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test2" id="test2" style="display:none">
<h2>Choice 2<br>Page 1</h2>
<input type="button" value="Next" id="page_choice" onclick="otherPage()">
<input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="choice2_page2" id="choice2_page2" style="display:none">
<h2>You should have chose<br><b>Choice 1</b></h2><!-- When clicked, this "Choice 1" should display the contents of id="test1" (Choice 1, Page 1)-->
<input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
</body>
</center>
</html>

Okay, I think this is what you want, it may be a bit big, but it's a full solution for your problem, I guess. Mainly, you have some pages, the user may choose, which page to see first, but then you force the user to see all next pages one by one till the end. At least, it's what I did here.
You may add as much text pieces (pages) as you like in textContent array, just check that you have a corresponding number of radio buttons.
<html>
<head></head>
<body>
<div id="mainDiv" style="text-align: center">
<div id="textDiv"></div>
<div id="radioDiv">
<input type="radio" id="rad1" name="radGrp"><label for="rad1">1</label><br>
<input type="radio" id="rad2" name="radGrp"><label for="rad2">2</label><br>
<input type="radio" id="rad3" name="radGrp"><label for="rad3">3</label><br>
<input type="radio" id="rad4" name="radGrp"><label for="rad4">4</label><br>
<input type="radio" id="rad5" name="radGrp"><label for="rad5">5</label><br>
</div>
<div id="btnDiv">
<input type="button" id="btn" value="show"><br>
</div>
</div>
<script type="text/javascript">
/*here we push the onclick attribute in js, so the code is unobtrusive*/
document.getElementById("btn").onclick = function(){formContent();};
var radios = document.getElementsByName("radGrp"),
idCurrent = 0,
firstRun = true,
textContent = [
"<h3>option 1</h3><p>here is the text of option 1 :(</p>",
"<h3>option 2</h3><p>here is the text of option 2 :)</p>",
"<h3>option 3</h3><p>here is the text of option 3!</p>",
"<h3>option 4</h3><p>here is the text of option 4 :-D</p>",
"<h3>option 5</h3><p>here is the text of option 5 :-P</p>"
];
function hideDivs(){
document.getElementById("textDiv").style.display = "block";
document.getElementById("radioDiv").style.display = "none";
document.getElementById("btn").value = "next";
firstRun = false;
}
function restoreDivs(){
idCurrent=0;
document.getElementById("textDiv").style.display = "none";
document.getElementById("radioDiv").style.display = "block";
document.getElementById("btn").value = "show";
firstRun = true;
}
/*function to find the id of a checked radio from the group*/
function findChecked(){
for (var i=0; i<radios.length; i++) {
if (radios[i].checked) idCurrent = radios[i].id;
}
/*since the id is in text, we cut the first part and leave*/
/*just the number*/
idCurrent = parseInt(idCurrent.slice(3));
}
/*actual function*/
function formContent(){
if (idCurrent == 0) findChecked();
if (firstRun) {
hideDivs();
}
/*pushing into textDiv values from textContent array, which*/
/*is your pages content*/
document.getElementById("textDiv").innerHTML = textContent[idCurrent - 1];
if (idCurrent<radios.length) {
idCurrent++;
/*changing the button value if the current piece of text*/
/*is the last one*/
} else if (idCurrent == radios.length) {
idCurrent++;
document.getElementById("btn").value = "finish!";
/*if there is no more text, we just restore everything to*/
/*the initial state*/
} else {
restoreDivs();
idCurrent = 0;
}
}
</script>
</body>
</html>

I think this is what you may be looking for
function showPage(id)
{
document.getElementById(id).style.display = 'block';
}
Choice 1

Ok, so here I've added consequent steps, that can be split into some categories (here: 3), if you select a step from some category, you will just read it. Hope that helps ;)
<html>
<head></head>
<body>
<div id="mainDiv" style="text-align: center">
<div id="textDiv"></div>
<div id="radioDiv">
<input type="radio" id="rad1" name="radGrp"><label for="rad1">1. reinstall os (step 1)</label><br>
<input type="radio" id="rad2" name="radGrp"><label for="rad2">2. reinstall os (step 2)</label><br>
<input type="radio" id="rad3" name="radGrp"><label for="rad3">3. reinstall os (step 3)</label><br>
<input type="radio" id="rad4" name="radGrp"><label for="rad4">4. reinstall os (step 4)</label><br>
<input type="radio" id="rad5" name="radGrp"><label for="rad5">5. watering a plant (step 1)</label><br>
<input type="radio" id="rad6" name="radGrp"><label for="rad6">6. watering a plant (step 2)</label><br>
<input type="radio" id="rad7" name="radGrp"><label for="rad7">7. reading alphabet (step 1)</label><br>
<input type="radio" id="rad8" name="radGrp"><label for="rad8">8. reading alphabet (step 2)</label><br>
<input type="radio" id="rad9" name="radGrp"><label for="rad9">9. reading alphabet (step 3)</label><br>
<input type="radio" id="rad10" name="radGrp"><label for="rad10">10. reading alphabet (step 4)</label><br>
</div>
<div id="btnDiv">
<input type="button" id="btn" value="show"><br>
</div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){formContent();};
var radios = document.getElementsByName("radGrp"),
idCurrent = 0,
planCurrent,
firstRun = true,
instructions = [
[0,1,2,3], /* your instruction plans */
[4,5], /* this is the second plan (with index = 1) and it has steps 5 and 6 */
[6,7,8,9] /* this is the third plan (with index = 2) and it has steps 7, 9, 9 and 10 */
],
textContent = [
"<h3>reinstall os (step 1)</h3><p>download .iso from torrent</p>",
"<h3>reinstall os (step 2)</h3><p>burn it to a cd of usb</p>",
"<h3>reinstall os (step 3)</h3><p>change bios settings</p>",
"<h3>reinstall os (step 4)</h3><p>boot, install, enjoy</p>",
"<h3>watering a plant (step 1)</h3><p>pour some water into a flask</p>",
"<h3>watering a plant (step 2)</h3><p>water the plant, enjoy</p>",
"<h3>reading alphabet (step 1)</h3><p>read letter \"a\"</p>",
"<h3>reading alphabet (step 2)</h3><p>read letter \"b\"</p>",
"<h3>reading alphabet (step 3)</h3><p>read letter \"c\"</p>",
"<h3>reading alphabet (step 4)</h3><p>read all the other letters, enjoy</p>"
];
function hideDivs(){
document.getElementById("textDiv").style.display = "block";
document.getElementById("radioDiv").style.display = "none";
document.getElementById("btn").value = "next";
firstRun = false;
}
function restoreDivs(){
document.getElementById("textDiv").style.display = "none";
document.getElementById("radioDiv").style.display = "block";
document.getElementById("btn").value = "show";
idCurrent=0;
firstRun = true;
}
/*function to find the id of a checked radio from the group*/
function findChecked(){
for (var i=0; i<radios.length; i++) {
if (radios[i].checked) idCurrent = radios[i].id;
}
idCurrent = parseInt(idCurrent.slice(3))-1;
}
/*find which plan checked id belongs*/
function findPlan(){
for (var m=0;m<instructions.length;m++){
for (var n=0;n<instructions[m].length;n++){
if (instructions[m][n] == idCurrent) planCurrent = m;
}
}
}
/*actual function*/
function formContent(){
if (firstRun) {
findChecked();
findPlan();
hideDivs();
}
/*pushing into textDiv values from textContent array, which is your pages content*/
document.getElementById("textDiv").innerHTML = textContent[idCurrent];
/*check that we read just the current plan*/
if (idCurrent < instructions[planCurrent][instructions[planCurrent].length - 1]){
idCurrent++;
} else if (idCurrent == instructions[planCurrent][instructions[planCurrent].length - 1]) {
idCurrent++;
document.getElementById("btn").value = "finish!";
} else {
restoreDivs();
}
}
</script>
</body>
</html>

Related

how to count check checkboxes in a specific div JAVASCRIPT

I would like to alert the amount of check boxes that are checked in a specific div (not the ones in the <head>!), here is the code :
HTML
<div class="changer">
<label><input id="mode" type="checkbox" name="mode" value="Mode" onclick="mode()" />Mode</label><br />
<label><input id="map" type="checkbox" name="map" value="Map" onclick="map()"/>Map</label><br />
<label><input id="joueurs" type="checkbox" name="joueurs" value="Joueurs" onclick="joueurs()" />Joueurs</label><br />
<label><input id="points" type="checkbox" name="points" value="Points" onclick="points()" />Points</label><br />
</div>
</head>
<body>
<div id="text">
</div>
</body>
<button id="send" onclick="send()">Envoyer</button>
Javascript
function joueurs() {
if((document.getElementById("joueurs").checked == true)) {
joueursall.style.display = 'inline';
text.style.display = 'inline';
}
else {
if((document.getElementById("mode").checked == true)) {
modeall.style.display = 'none';
document.getElementById('mode').checked = false;
}
joueursall.style.display = 'none';
text.style.display = 'none';
}
}
document.getElementById("playerlist").addEventListener("change", function() {
var selected = this.value;
document.getElementById("text").innerHTML = "";
var html = '';
for (var i = 0; i < selected; i++) {
html += '<div class="grpjoueur"> <span class="sub-text">Player</span> <label><input type="checkbox" name="botbot" value="BOT"/>BOT</label </div>';
}
document.getElementById("text").innerHTML = html;
});
Here is the Javascript, it adds 'Joueurs' Dropdownlist if Joueurs is checked and then pop X times something, including a check box, according to the number selected in the Dropdownlist in the #text div
I tried multiple things but always return 0 or all the checkboxes...
In vanilla JS you can use querySelectorAll to query the checkboxes, and then .length to get the number of checkboxes.
var checkboxes = document.querySelectorAll("input[type='checkbox']");
alert(checkboxes.length);
CodePen Demo
If you want to alert only the length of the checked checkboxes, you can query them like this:
var checkedInputs = document.querySelectorAll("input:checked");
alert(checkedInputs.length);
CodePen Demo
when you click on the button, it will alert the number of checked boxes

How to create 3 links to define and one to erase

The document added another 3 link given in such a way that three links define three fruit and the fourth to erase selections
How do I do that?
<html>
<head>
<script language="javascript">
<!--
function FruitBox() {
window.document.myform.fruit[].checked = true;
}
function clearall() {
for (var p = 1; p < 3; p++) {
var x = window.document.myform.fruit("value");
for (var i = 0; i < 4; i++)
x[i].checked = false;
}
}
//-->
</script>
</head>
<body>
<from name="myform">
<input type="radio" name="fruit" onclick="window.document.myform.fruit.value='oranges'">oranges & Tangerines <br>
<input type="radio" name="fruit" onclick="window.document.myform.fruit.value='bananas'">bananas <br>
<input type="radio" name="fruit" onclick="window.document.myform.fruit.value='peaches'">peaches,Nectarines & Palmus <br> To select Oranges click here
<input type="reset" Value="Sterge" onClick=" clearall()" />
</from>
</body>
</html>
You misspelled tag form
you need to pass something to the function
you need to access that something
the reset will reset the form. No need to call a function
since you use form access there is no need to address the form from the top of the document but there is ALSO no need to set the value of the fruit on click
if you give each radio an ID, you can have a <label for="oranges">Click here to select oranges</label> instead of a link
<html>
<head>
<script language="javascript">
function FruitBox(idx) {
window.document.myform.fruit[idx].checked = true;
return false; // cancel the link - preventDefault can be used too
}
/* NOT needed
function clearall() {
for (var p = 1; p < 3; p++) {
var x = window.document.myform.fruit("value");
for (var i = 0; i < 4; i++)
x[i].checked = false;
}
}
*/
</script>
</head>
<body>
<form name="myform">
<input type="radio" name="fruit">oranges & Tangerines <br>
<input type="radio" name="fruit">bananas <br>
<input type="radio" name="fruit">peaches,Nectarines & Palmus <br>
To select Oranges click here
<input type="reset" Value="Sterge" />
</from>
</body>
</html>

what's wrong with start1()?

Does anyone know what's wrong with start1()? I know that something is not right but I just can't figure what is it.
I have got this school project where i need to do a quiz and record the time that people need to answer all the questions. I've tried everything i know but nothing works. please help
<body>
<div id="classic">
<input type="button" onclick="start1= setInterval(contador, 1000)" value="yes">
<input type="button" onclick="back1()" value="Menu">
</div>
<div id="quizr" hidden>
<h1> who sings the song </h1>
<div id="P1">
<p>1.'Thinking Out Loud'</p>
A)<input type="radio" name="q1" id="q1r1" > Hozier<br>
B)<input type="radio" name="q1" id="q1r2" > Jason Derulo<br>
C)<input type="radio" name="q1" id="q1r3" > Ed Sheeran<br>
D)<input type="radio" name="q1" id="q1r4" > Mr. Probz<br>
<br>
<input type="button" onclick='go1()' value="next »" >
</div>
<div id="P2" hidden>
<p>2.'GANGNAM STYLE'</p>
A)<input type="radio" name="q15" id="q15r1" > Tori Kelly<br>
B)<input type="radio" name="q15" id="q15r2" > Jessie J<br>
C)<input type="radio" name="q15" id="q15r3" > Beyoncé<br>
D)<input type="radio" name="q15" id="q15r4" > Psy<br>
<br>
<input type="button" onclick='verify1= clearInterval(start1)'value="submit">
</div>
</div>
<div id="result" hidden></div>
function start1()
{
document.getElementById("classic").hidden=true;
document.getElementById("quizr").hidden=false;
}
var t= 0;
function contador()
{
document.getElementById("resultado").innerHTML = ++t;
}
function go1()
{
document.getElementById("P1").hidden= true;
document.getElementById("P2").hidden = false;
}
function verify1()
{
document.getElementById("P2").hidden = true;
document.getElementById("result").hidden = false;
var correctAnswers= 0;
var question1 = document.getElementById("q1r3").checked;
if (question1 === true)
{
correctAnswers = correctAnswers + 1;
}
var question2 = document.getElementById("q2r4").checked;
if (question2 === true)
{
correctAnswers = correctAnswers + 1;
}
document.getElementById("resultado").innerHTML = correctAnswers + "/15" + " " + " correct" + " "+ "answers";
}
This is just a readonly. See the docs:
hidden
Is a Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
What you must really do is:
document.getElementById("classic").style.display = 'none';
document.getElementById("quizr").style.display = 'block';

Undefined error in Mozilla Firefox

Why I'm getting undefined error in Firefox and IE. This code works well in Google Chrome. Here is the full code http://liveweave.com/fUhpiI
this is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/hpstyles.css" rel="stylesheet">
<script src="js/hpjs.js"></script>
</head>
<body>
<form id="hp">
<div>
<h2>1. Which one do you prefer?</h2>
<div>
<input type="radio" name="q1" id="radio1" class="radio" value="9"/>
<label for="radio1">Tea</label>
</div>
<div>
<input type="radio" name="q1" id="radio2" class="radio" value="4"/>
<label for="radio2">Coffee</label>
</div>
<div>
<input type="radio" name="q1" id="radio3" class="radio" value="1"/>
<label for="radio3">Milk</label>
</div>
</div>
<div>
</br>
<div><div>
<button type="button" onclick="hp(this.form)">Check</button>
<input class="reset" type="reset" value="Reset">
</div></div></div>
</form>
<div id="result"></div>
<div id="total"></div>
</body>
</html>
this is javascript
function hp(form)
{
var count1=0, count2=0, count3=0, count4=0, count5=0, count6=0, count7=0, count8=0, count9=0, count10=0,a ;
for(var i=0;i<3;i++){
if (form.q1[i].checked === true)
{
count1++;
}
}
if(count1!==1){
alert("Please Answer 1st Question");
return false;
}
answer1 = (form.q1.value);
a=Math.floor(answer1);
document.getElementById("result").innerHTML= "The selected values are "+"</br>"+answer1;
}
you should declare a answer variable .and you should access "q1" elements by giving index since you have 3 "q1" elements .basically form.q1 is a object NodeList .you can't get value from object NodeList.so actually in your case you should add brake to for loop and find the clicked radio button index .
you should use
answer1 = form.q1[i].value;
instead of
answer1 = form.q1.value;
explain
form.q1 is a object NodeList so
form.q1.value --> undefined since object NodeList/collection has no property "value"
and
form.q1[0] --> HTMLInputElement so
form.q1[0].value --> is not undefined
fixed code .WORKING DEMO http://jsfiddle.net/madhawa11111/3rywkdvf/
function hp(form) {
var i;
var answer;
var count1 = 0,count2 = 0,count3 = 0,count4 = 0,count5 = 0,count6 = 0,count7 = 0,count8 = 0,count9 = 0,count10 = 0, a;
for (i = 0; i < 3; i++) {
if (form.q1[i].checked === true) {
count1++;
break;
}
}
if (count1 !== 1) {
alert("Please Answer 1st Question");
return false;
}
answer1 = form.q1[i].value; //error was here .
a = Math.floor(answer1);
document.getElementById("result").innerHTML = "The selected values are " + "</br>" + answer1;
}
if it worked in google chorm that's because browsers ignore some errors.

Change the background of the radio button depending by the answer

I'm creating a mini quiz, if the answer is correct the background will be green, if is wrong will be red
here is the code of HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form class="forma">
<div class="pyetja"><h3>1. The flag if Italy which color has..</h3>
<div class="formafoto"><div class="foto"></div><div class="pergjigjet"><div class="pergjigje">
<div class="pergjigjemajtas">
white and blue
</div>
<div class="pergjigjedjathtas" id="0">
<label><input type="radio" value="1" name="0" unchecked="">right</label>
<label><input type="radio" value="0" name="0" unchecked="">wrong</label>
</div>
</div>
<div class="pergjigje">
<div class="pergjigjemajtas">
white and red
</div>
<div class="pergjigjedjathtas" id="1">
<label><input type="radio" value="1" name="1" unchecked="">right</label>
<label><input type="radio" value="0" name="1" unchecked="">wrong</label>
</div>
</div>
<div class="pergjigjeno">
<div class="pergjigjemajtas">
white red and green
</div>
<div class="pergjigjedjathtas" id="2">
<label><input type="radio" value="1" name="2" unchecked="">right</label>
<label><input type="radio" value="0" name="2" unchecked="">wrong</label>
</div>
</div></div></div></div>
<div class="question">
<input id="buton" type="button" value="Finish!" onClick="getScore(this.form); getResult(this.form);">
<p> <strong class="bgclr">Result = </strong><strong><input class="bgclr1" type="text" size="2" name="percentage" disabled></strong><br><br>
<div id="rezultati"></div>
</div>
</form>
</body>
</html>
and javascript
// Insert number of questions
var numQues = 3;
// Insert number of choices in each question
var numChoi = 2;
// Insert number of questions displayed in answer area
var answers = new Array(2);
// Insert answers to questions
answers[0] = 1;
answers[1] = 1;
answers[2] = 1;
// Do not change anything below here ...
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
}
}
}
}
var radio1 = document.getElementByName("0").value;
if (answers[0] == radio1) {
document.getElementById("0").style.backgroundColor="#00FF00";
} else {
document.getElementById("0").style.backgroundColor="#e83f3f";
}
if(score > 3) {
document.getElementById("rezultati").innerHTML = "Congratulation!";
} else {
document.getElementById("rezultati").innerHTML = "Try again!";
}
form.percentage.value = score;
form.solutions.value = correctAnswers;
}
// End -->
</script>
I get always red background and if the answer is correct, maybe document.getElementByName("0").value is not getting a number to make true the condition
var radio1 = document.getElementByName("0").value;
if (answers[0] == radio1) {
document.getElementById("0").style.backgroundColor="#00FF00";
} else {
document.getElementById("0").style.backgroundColor="#e83f3f";
}
var radio1 = document.getElementByName("0").value;
if (answers[0] == radio1) {
Probably your error is in this line of code, the id="0" is a div and you are trying to get the value of it, this might result into undefined and the value answer[0] is 1, thus 1 is not equal to radio1, thus it is always getting into the else block.

Categories

Resources