How to shuffle the vertical order of across different section labels?

How to shuffle the vertical order of across different section labels? - javascript

I have a large html document where each part is separated by <section> </section> labels, for example:
<!DOCTYPE html>
<html>
<body>
<section>
<h1>A file</h1>
<form action="/action_page.php">
<p>Please select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</section>
<br>
<section>
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
</section>
<input type="submit" value="Submit">
</form>
</body>
</html>
How can I randomly shuffle the order of the sections? that is, I would like to each time the user loads the page the order of the section randomly switch?

To sort randomly you can use the sort() method along with Math.random() to reorder the elements. Also note that your HTML would need to be changed slightly to make the logic simpler - primarily by adding a new div around the section elements to contain them, and also ensuring that the <form> element wraps all the section content. Try this:
let $container = $('.sections');
$container.find('section').sort((a, b) => Math.random() > 0.5 ? 1 : -1).prependTo($container);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/action_page.php">
<h1>A file</h1>
<div class="sections">
<section>
<p>Please select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</section>
<section>
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
</section>
</div>
<input type="submit" value="Submit">
</form>

Here's the solution I came up with (while the question was still unanswered). I like the jQuery answer now already posted. But if you didn't want to use jQuery:
window.onload = () => {
const sections = document.querySelectorAll('section');
const form = document.querySelector('form');
sections.forEach(el => form.removeChild(el));
Array.from(Array(sections.length).keys()).sort(() => Math.random() - 0.5).forEach((el, i) => form.insertBefore(sections[el], form.childNodes[i]));
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shuffle</title>
</head>
<body>
<h1>A file</h1>
<form action="/action_page.php">
<section>
<p>Please select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br>
</section>
<section>
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br>
</section>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Here's a solution that does not use jquery.
Add unique ids to each section
make a list of ids and shuffle them up (I use Knuth shuffle)
traverse the shuffled array and:
remove the section belonging to the current id (could be anywhere in the current ordering)
prepend the section belonging to the current id to the html (this produces a random ordering)
<!DOCTYPE html>
<html>
<body>
<h1>A file</h1>
<form action="/action_page.php" id="action-page-form">
<section id="gender-section">
<p>Please select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</section>
<section id="age-section">
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br>
</section>
<br>
<input type="submit" value="Submit">
</form>
</body>
<script>
const sectionList = ["gender-section", "age-section"];
// Fisher-Yates (aka Knuth) Shuffle
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
shuffle(sectionList);
var formElement = document.getElementById("action-page-form");
sectionList.forEach(sectionId => {
var thisSection = document.getElementById(sectionId)
thisSection.remove();
formElement.insertBefore(thisSection, formElement.childNodes[0]);
})
</script>
</html>
For Knuth Shuffle see: How to randomize (shuffle) a JavaScript array?

Related

I am trying to create a rating system in html/js and i cant log more than one review [duplicate]

Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>

Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>

This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other

Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>

in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >

To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.

Why is my counter always equal to zero even after the correct radio button is pressed?

In my Javascript code, I increment the counter when the right radio button is checked but when I check in the console, the counter doesn't get updated after the correct radio button is checked. Even after I click the submit button which calls a function clicked() that displays the counter. The counter still remains zero. Is there a reason why it doesn't get updated. Here is my Java Script code:
var counter = 0;
if (document.getElementById('blue').checked) {
counter++;
}
if (document.getElementById('age3').checked) {
counter++;
}
if (document.getElementById('hobby2').checked) {
counter++;
}
if (document.getElementById('game3').checked) {
counter++;
}
if (document.getElementById('language4').checked) {
counter++;
}
function clicked() {
document.getElementById("result").innerHTML = "You got " + counter;
}
<h1>Quiz</h1>
<form>
<p>(1) What is my favourite Color?</p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">blue</label><br>
<input type="radio" id="red" name="color" value="red">
<label for="red">red</label><br>
<input type="radio" id="green" name="color" value="green">
<label for="green">green</label><br>
<input type="radio" id="purple" name="color" value="purple">
<label for="purple">purple</label>
<br>
<p>(2) How Old am I?</p>
<input type="radio" id="age1" name="age" value="20">
<label for="age1">20</label><br>
<input type="radio" id="age2" name="age" value="22">
<label for="age2">22</label><br>
<input type="radio" id="age3" name="age" value="21">
<label for="age3">21</label><br>
<input type="radio" id="age4" name="age" value="23">
<label for="age4">23</label>
<br>
<p>(3) Which of the following is not of a hobby of mine?</p>
<input type="radio" id="hobby1" name="hobby" value="swimming">
<label for="hobby1">swimming</label><br>
<input type="radio" id="hobby2" name="hobby" value="soccer">
<label for="hobby2">soccer</label><br>
<input type="radio" id="hobby3" name="hobby" value="chess">
<label for="hobby3">chess</label><br>
<input type="radio" id="hobby4" name="hobby" value="coding">
<label for="hobby4">coding</label>
<br>
<p>(4) Which of the following is a game that I like?</p>
<input type="radio" id="game1" name="game" value="NBA">
<label for="game1">NBA</label><br>
<input type="radio" id="game2" name="game" value="FortNite">
<label for="game2">FortNite</label><br>
<input type="radio" id="game3" name="game" value="God of War">
<label for="game3">God of War</label><br>
<input type="radio" id="game4" name="game" value="Call of Duty">
<label for="game4">Call of Duty</label>
<p>(5) At what is my favourite language</p>
<input type="radio" id="language1" name="language" value="python">
<label for="language1">python</label><br>
<input type="radio" id="language2" name="language" value="Javascript">
<label for="language2">Javascript</label><br>
<input type="radio" id="language3" name="language" value="C++">
<label for="language3">C++</label><br>
<input type="radio" id="language4" name="language" value="Java">
<label for="language4">Java</label><br><br>
</form>
<button onclick="clicked()">Submit</button>
<p id="result"> </p>

Put all those radio button checkings into a function and call that function when you hit submit. This should solve your problem.
var counter = 0;
function updateCounter(){
if (document.getElementById('blue').checked) {
counter++;
}
if (document.getElementById('age3').checked) {
counter++;
}
if (document.getElementById('hobby2').checked) {
counter++;
}
if (document.getElementById('game3').checked) {
counter++;
}
if (document.getElementById('language4').checked) {
counter++;
}
}
function clicked() {
updateCounter()
document.getElementById("result").innerHTML = "You got " + counter;
//reset the counter back to zero after displaying score
counter = 0
}
<h1>Quiz</h1>
<form>
<p>(1) What is my favourite Color?</p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">blue</label><br>
<input type="radio" id="red" name="color" value="red">
<label for="red">red</label><br>
<input type="radio" id="green" name="color" value="green">
<label for="green">green</label><br>
<input type="radio" id="purple" name="color" value="purple">
<label for="purple">purple</label>
<br>
<p>(2) How Old am I?</p>
<input type="radio" id="age1" name="age" value="20">
<label for="age1">20</label><br>
<input type="radio" id="age2" name="age" value="22">
<label for="age2">22</label><br>
<input type="radio" id="age3" name="age" value="21">
<label for="age3">21</label><br>
<input type="radio" id="age4" name="age" value="23">
<label for="age4">23</label>
<br>
<p>(3) Which of the following is not of a hobby of mine?</p>
<input type="radio" id="hobby1" name="hobby" value="swimming">
<label for="hobby1">swimming</label><br>
<input type="radio" id="hobby2" name="hobby" value="soccer">
<label for="hobby2">soccer</label><br>
<input type="radio" id="hobby3" name="hobby" value="chess">
<label for="hobby3">chess</label><br>
<input type="radio" id="hobby4" name="hobby" value="coding">
<label for="hobby4">coding</label>
<br>
<p>(4) Which of the following is a game that I like?</p>
<input type="radio" id="game1" name="game" value="NBA">
<label for="game1">NBA</label><br>
<input type="radio" id="game2" name="game" value="FortNite">
<label for="game2">FortNite</label><br>
<input type="radio" id="game3" name="game" value="God of War">
<label for="game3">God of War</label><br>
<input type="radio" id="game4" name="game" value="Call of Duty">
<label for="game4">Call of Duty</label>
<p>(5) At what is my favourite language</p>
<input type="radio" id="language1" name="language" value="python">
<label for="language1">python</label><br>
<input type="radio" id="language2" name="language" value="Javascript">
<label for="language2">Javascript</label><br>
<input type="radio" id="language3" name="language" value="C++">
<label for="language3">C++</label><br>
<input type="radio" id="language4" name="language" value="Java">
<label for="language4">Java</label><br><br>
</form>
<button onclick="clicked()">Submit</button>
<p id="result"> </p>

Every time you are getting the value as 0 as the login you written is not calling on clicking of radio button.
First thing Just defined the all radio button into a method like below.
function SelectValue () {
counter = 0;
if (document.getElementById('blue').checked)
{
counter++;
}
if (document.getElementById('age3').checked)
{
counter++;
}
if (document.getElementById('hobby2').checked)
{
counter++;
}
if (document.getElementById('game3').checked)
{
counter++;
}
if (document.getElementById('language4').checked)
{
counter++;
}
}
Now there is two way you can call.
Either call that method in each and every method like below.
<p>(1) What is my favourite Color?</p>
<input type="radio" id="blue" name="color" value="blue" onclick="clickmethodthod()">
<label for="blue">blue</label><br>
Write a logic of click and attached to all radio button.
let counter = 0;
const radios = document.querySelector('input[type="radio"]');
for(radio in radios) {
radios[radio].onclick = function() {
SelectValue ()
}
}
Let me know if you are getting any issue.

My countdown timer is not working

I am attaching my .js as well as php file, no output is being displayed on the screen not even the __________ placed in the <p> tag ,the php file is only up to the <p> tag where the id for the .js file is attached.
js code:
var timeleft = 600;
var startTime = 0;
var currentTime = 0;
function convertSeconds(s) {
var min = floor(s / 60);
var sec = s % 60;
return nf(min, 2) + ':' + nf(sec, 2);
}
var ding;
function preload() {
ding = loadSound("ding.mp3");
}
function setup() {
noCanvas();
startTime = millis();
var params = getURLParams();
console.log(params);
if (params.minute) {
var min = params.minute;
timeleft = min * 60;
}
var timer = select('#timer');
timer.html(convertSeconds(timeleft - currentTime));
var interval = setInterval(timeIt, 1000);
function timeIt() {
currentTime = floor((millis() - startTime) / 1000);
timer.html(convertSeconds(timeleft - currentTime));
if (currentTime == timeleft) {
ding.play();
clearInterval(interval);
//counter = 0;
}
}
}
html code:
<html>
<head>
<title>online examination system</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<meta charset="UTF-8">
<script language="javascript" type="text/javascript src=" libraries
/p5.js</script>
< script language = "javascript"
src = "libraries/p5.dom.js" ></script>
<script language="javascript" src="libraries/p5.sound.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>
<body>
<div class=header>
<img class="img-style" src="Online-Examination-System-Banner.jpeg" width="1166px" height="250px">
</div>
<div class="top">
<ul id="navigation">
<li>HOME</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
<li>EXAMINATION</li>
<li>LOGIN</li>
<li>LOGOUT</li>
</ul>
</div>
<p style="font-size:40;color:white;font-weight:bolder;">Welcome !</p>
<p id="timer" style="color:white;font-family:courier;font-size:28px; float:center;">______</p>
<form action="cplus.php" method="post" >
<div style="margin-top:10px;margin-right:85px;margin-left:100px;margin- bottom:20px;background:rgba(0,0,0,0.5)">
<p style="color:white;font-family:courier;font-size:18px">1. Which of the following correctly declares an array?</p> <br>
<input class="exam-btn" type="radio" name="q1" id="q1-a" value="A" checked>
<label for="q1-a" style="color:white;font-family:courier;font-size:18px">int array[10];</label>
<input class="exam-btn" type="radio" name="q1" id="q1-b" value="B">
<label style="color:white;font-family:courier;font-size:18px">int array;</label>
<input class="exam-btn" type="radio" name="q1" id="q1-c" value="C">
<label style="color:white;font-family:courier;font-size:18px">array{10};</label>
<input class="exam-btn" type="radio" name="q1" id="q1-d" value="D">
<label style="color:white;font-family:courier;font-size:18px">array array[10];</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">2. What is the index number of the last element of an array with 9 elements?</p> <br>
<input class="exam-btn" type="radio" name="q2" id="q2-a" value="A">
<label style="color:white;font-family:courier;font-size:18px">9</label>
<input class="exam-btn" type="radio" name="q2" id="q2-b" value="B" checked>
<label style="color:white;font-family:courier;font-size:18px">8</label>
<input class="exam-btn" type="radio" name="q2" id="q2-c" value="C">
<label style="color:white;font-family:courier;font-size:18px">0</label>
<input class="exam-btn" type="radio" name="q2" id="q2-d" value="D">
<label style="color:white;font-family:courier;font-size:18px">programmer defined</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">3. Which of the following accesses the seventh element stored in array?</p> <br>
<input class="exam-btn" type="radio" name="q3" id="q3-a" value="A" checked>
<label style="color:white;font-family:courier;font-size:18px">array[6];</label>
<input class="exam-btn" type="radio" name="q3" id="q3-b" value="B" >
<label style="color:white;font-family:courier;font-size:18px">array[7];</label>
<input class="exam-btn" type="radio" name="q3" id="q3-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">array(7);</label>
<input class="exam-btn" type="radio" name="q3" id="q3-d" value="D" >
<label style="color:white;font-family:courier;font-size:18px">array;</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">4. Which of the following gives the memory address of the first element in array?</p> <br>
<input class="exam-btn" type="radio" name="q4" id="q4-a" value="A" >
<label style="color:white;font-family:courier;font-size:18px">array[0];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-b" value="B" >
<label style="color:white;font-family:courier;font-size:18px">array[1];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">array[2];</label>
<input class="exam-btn" type="radio" name="q4" id="q4-d" value="D" checked>
<label style="color:white;font-family:courier;font-size:18px">none</label>
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">5. What will be the output of this program?</p> <br>
<pre style="color:white;font-family:courier;font-size:18px">
#include <stdio.h>
using namespace std;
int array1[] = {1200, 200, 2300, 1230, 1543};
int array2[] = {12, 14, 16, 18, 20};
int temp, result = 0;
int main()
{
for (temp = 0; temp < 5; temp++)
{
result += array1[temp];
}
for (temp = 0; temp < 4; temp++)
{
result += array2[temp];
}
cout << result;
return 0;
}
</pre>
</pre>
<input class="exam-btn" type="radio" name="q5" id="q5-a" value="A" >
<label style="color:white;font-family:courier;font-size:18px">6553</label>
<input class="exam-btn" type="radio" name="q5" id="q5-b" value="B" checked>
<label style="color:white;font-family:courier;font-size:18px">6533</label>
<input class="exam-btn" type="radio" name="q5" id="q5-c" value="C" >
<label style="color:white;font-family:courier;font-size:18px">6522</label>
<input class="exam-btn" type="radio" name="q5" id="q5-d" value="D" >
<label style="color:white;font-family:courier;font-size:18px">12200</label>
<br><br><br><br>
<! 1. token 2. sensitive 3. identifiers
4. octal 5. \0n -->
<p style="color:white;font-family:courier;font-size:18px">6.The smallest individual unit in a program is known as a …………………… </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">7.C++ Language is case …………………. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">8.An ………………… is a long sequence of letters and digits. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">9.A sequence of digits beginning with zero is considered to be …………….number. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p><input class="exam-btn" type="text" name="" >
<br><br><br><br>
<p style="color:white;font-family:courier;font-size:18px">10.………………. escape sequence represents the given number in octal form. </p> <br>
<p style="color:white;font-family:courier;font-size:18px">ans</p>
<input class="exam-btn" type="text" name="" >
<br><br><br><br>
<input type="submit" value="Submit quiz">
</div>
<div style="font-size:18px;color:white;font-weight:bolder;">
<?php
$answer1;
$answer2;
$answer3;
$answer4;
$answer5;
$answer1 = $_POST['q1'];
$answer2 = $_POST['q2'];
$answer3 = $_POST['q3'];
$answer4 = $_POST['q4'];
$answer5 = $_POST['q5'];
$totalcorrect;
$totalcorrect = 0;
if($answer1 == "A") {$totalcorrect++;}
if($answer2 == "B") {$totalcorrect++;}
if($answer3 == "A") {$totalcorrect++;}
if($answer4 == "D") {$totalcorrect++;}
if($answer5 == "B") {$totalcorrect++;}
echo "total correct answers are".$totalcorrect;
?>
</div>
</div>
</form>
</body>
</html>

How Can I Cascade Radio Buttons In Javascript?

I'm new to programming and am tasked with creating a clickable tournament bracket. 8 teams, where you can pick the winners who will advance to the next round.
The problem I'm running into is when a person would want to revise picks in the first or second round after filling out the bracket.
For example in the first round the user picks:
Team1 v. Team8 --> #1 moves on
Team4 v. Team5 --> #4 moves on
Team3 v. Team6 --> #3 moves on
Team2 v. Team7 --> #2 moves on
In the Second Round let's say they pick:
Team1 v. Team4 --> #1 moves on
Team2 v. Team3 --> #2 moves on
In the Finals, they pick:
Team1 v. Team2 --> #1 wins.
Then, let's say the user changes their mind and picks Team8 to upset Team1 in the first round. Right now the code would still show Team1 as the winner and in the final game. How can I remove the text for the future rounds that currently shows Team1?
Attaching JSFiddle here: https://jsfiddle.net/a4hya2c7/5/ or see below code:
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<p>First Round</p>
<div id="round1">
<input type="radio" name="g1" id="i1" value="#1" onclick="changeText(this.value);"><label id="r1">#1</label>
<input type="radio" name="g1" id="i2" value="#8" onclick="changeText(this.value);"><label id="r2">#8</label></br>
<input type="radio" name="g2" id="i3" value="#4" onclick="changeText2(this.value);"><label id="r3">#4</label>
<input type="radio" name="g2" id="i4" value="#5" onclick="changeText2(this.value);"><label id="r4">#5</label></br>
<input type="radio" name="g3" id="i5" value="#3" onclick="changeText3(this.value);"><label id="r5">#3</label>
<input type="radio" name="g3" id="i6" value="#6" onclick="changeText3(this.value);"><label id="r6">#6</label></br>
<input type="radio" name="g4" id="i7" value="#7" onclick="changeText4(this.value);"><label id="r7">#7</label>
<input type="radio" name="g4" id="i8" value="#2" onclick="changeText4(this.value);"><label id="r8">#2</label></br>
</div>
</br>
<p>Second Round</p>
<div id="round2">
<input type="radio" name="g5" id="i9" onclick="changeText5(this.value);"><label id="r9"></label>
<input type="radio" name="g5" id="i10" onclick="changeText5(this.value);"><label id="r10"></label></br>
<input type="radio" name="g6" id="i11" onclick="changeText6(this.value);"><label id="r11"></label>
<input type="radio" name="g6" id="i12" onclick="changeText6(this.value);"><label id="r12"></label></br>
</div>
</br>
<p>Finals</p>
<div id="round3">
<input type="radio" name="g7" id="i13" onclick="changeText7(this.value);"><label id="r13"></label>
<input type="radio" name="g7" id="i14" onclick="changeText7(this.value);"><label id="r14"></label></br>
</div>
</br>
<p>Winner</p>
<div id="round4">
<label value="#8" id="r15"></label></br>
</div>
</br>
</body>
</html>
JS:
function changeText(value) {
document.getElementById('r9').innerHTML = value;
document.getElementById('i9').value = value;
}
function changeText2(value) {
document.getElementById('r10').innerHTML = value;
document.getElementById('i10').value = value;
}
function changeText3(value) {
document.getElementById('r11').innerHTML = value;
document.getElementById('i11').value = value;
}
function changeText4(value) {
document.getElementById('r12').innerHTML = value;
document.getElementById('i12').value = value;
}
function changeText5(value) {
document.getElementById('r13').innerHTML = value;
document.getElementById('i13').value = value;
}
function changeText6(value) {
document.getElementById('r14').innerHTML = value;
document.getElementById('i14').value = value;
}
function changeText7(value) {
document.getElementById('r15').innerHTML = value;
document.getElementById('r15').value = value;
}

Firstly your <br> tags aren't correct as you can see here:
</div>
</br>
You are using the close tag without the opening. You can either use:
<br/>
Or use the newer html5 self closing tags style:
<br>
As to the JS itself, you can simplify it a lot if you use an attribute, similar as the name you are already using to point where it must put the value. With that change the code would be a lot smaller and simpler:
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs){
inp.addEventListener("change", function(){
let targetLabel = document.getElementById(inp.dataset.target);
targetLabel.previousSibling.value = inp.value;
targetLabel.innerHTML = inp.value;
});
}
<p>First Round</p>
<div id="round1">
<input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
<input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
<input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
<input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
<input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
<input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
<input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
<input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
</div>
<br>
<p>Second Round</p>
<div id="round2">
<input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
<input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
<input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
<input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
</div>
<br>
<p>Finals</p>
<div id="round3">
<input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
<input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
</div>
<br>
<p>Winner</p>
<div id="round4">
<label value="#8" id="r15"></label><br>
</div>
<br>
Note that the targets i set were directly to the labels:
<input type="radio" ... data-target="r9">
Then to get to the corresponding radio i used previousSibling.
I used several functions that you may not know:
querySelectorAll - to get an array of elements matching the selector passed
for ... of to iterate on all inputs retrieved by the querySelectorAll
addEventListener - to set the event handler directly on Javascript and make the code cleaner
And with just those little lines of Javascript you have the same functionality, and most importantly, without code duplication.
Now if you want to cascade a change on the first radios to the lower ones, you can call the change event directly with:
const event = new Event('change');
element.dispatchEvent(event);
Whenever you see that the target element already has a value set. This works like a recursive call:
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs){
inp.addEventListener("change", function(){
let targetLabel = document.getElementById(inp.dataset.target);
let targetRadio = targetLabel.previousSibling;
targetRadio.value = inp.value;
targetLabel.innerHTML = inp.value;
//if this isn't the last and it's checked, to not cascade non selected radios
if (targetRadio.hasAttribute && targetRadio.checked){
const nextTargetLabel = document.getElementById(targetRadio.dataset.target);
if (nextTargetLabel.innerHTML != ''){ //if it has a value then cascade
targetRadio.dispatchEvent(new Event('change'));
}
}
});
}
<p>First Round</p>
<div id="round1">
<input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
<input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
<input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
<input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
<input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
<input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
<input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
<input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
</div>
<br>
<p>Second Round</p>
<div id="round2">
<input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
<input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
<input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
<input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
</div>
<br>
<p>Finals</p>
<div id="round3">
<input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
<input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
</div>
<br>
<p>Winner</p>
<div id="round4">
<label value="#8" id="r15"></label><br>
</div>
<br>
Edit:
To clear the following radios instead of cascading the values you can use a while, and navigating with the targets until you reach the end:
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs){
inp.addEventListener("change", function(){
let targetLabel = document.getElementById(inp.dataset.target);
let targetRadio = targetLabel.previousSibling;
targetLabel.innerHTML = inp.value;
targetRadio.value = inp.value;
//while there is a next target clear it
while (targetLabel.previousSibling.hasAttribute){
targetLabel = document.getElementById(targetRadio.dataset.target);
targetRadio = targetLabel.previousSibling;
targetRadio.checked = false;
targetLabel.innerHTML = '';
}
});
}
<p>First Round</p>
<div id="round1">
<input type="radio" name="g1" id="i1" value="#1" data-target="r9"><label id="r1">#1</label>
<input type="radio" name="g1" id="i2" value="#8" data-target="r9"><label id="r2">#8</label><br>
<input type="radio" name="g2" id="i3" value="#4" data-target="r10"><label id="r3">#4</label>
<input type="radio" name="g2" id="i4" value="#5" data-target="r10"><label id="r4">#5</label><br>
<input type="radio" name="g3" id="i5" value="#3" data-target="r11"><label id="r5">#3</label>
<input type="radio" name="g3" id="i6" value="#6" data-target="r11"><label id="r6">#6</label><br>
<input type="radio" name="g4" id="i7" value="#7" data-target="r12"><label id="r7">#7</label>
<input type="radio" name="g4" id="i8" value="#2" data-target="r12"><label id="r8">#2</label><br>
</div>
<br>
<p>Second Round</p>
<div id="round2">
<input type="radio" name="g5" id="i9" data-target="r13"><label id="r9"></label>
<input type="radio" name="g5" id="i10" data-target="r13"><label id="r10"></label><br>
<input type="radio" name="g6" id="i11" data-target="r14"><label id="r11"></label>
<input type="radio" name="g6" id="i12" data-target="r14"><label id="r12"></label><br>
</div>
<br>
<p>Finals</p>
<div id="round3">
<input type="radio" name="g7" id="i13" data-target="r15"><label id="r13"></label>
<input type="radio" name="g7" id="i14" data-target="r15"><label id="r14"></label><br>
</div>
<br>
<p>Winner</p>
<div id="round4">
<label value="#8" id="r15"></label><br>
</div>
<br>

Javascript classlist object and query selector to toggle

Can someone help me, because I'm stuck right now. I have to make a form toggle betweeen two fieldsets using classlist object and queryselector. I have to use a function in Javascript that adds the classlist to the fieldset.
Right now, this is my code in javascript:
var click = document.querySelector('form>fieldset>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
click.addEventListener("click", function() {
if (click === "stage") {
project.classList.toggle(".project");
}
else {
stage.classList.toggle(".stage");
}
});
This is my code in HTML:
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>
And this is my code in CSS:
.project {
display: none;
}
.stage {
display: none;
}
The fieldsets called "Project" and "Stage" have to toggle. So, when I click on the radio button called project, the stage form has to disappear, vice versa.
I can't use onclick, because my teacher don't want me to use that.

You have some problems in your code:
You fogot the start form tag.
project.classList.toggle(".project"); need to be project.classList.toggle("project");
2.1 You can't use toggle classes in this case, because you don't want to toggle, you want to add and remove. You want to show just one section on the same time. right?
You have multiple checkboxes so you need to attach click event to each of them.
var click = document.querySelectorAll('form fieldset:first-child>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
for (var cl = 0; cl < click.length; cl++) {
click[cl].addEventListener("change", function() {
//if (this.value === "stage") {
project.classList.toggle("show");
project.classList.toggle("hide");
stage.classList.toggle("show");
stage.classList.toggle("hide");
//stage.classList.remove("hide");
//}
//else {
// project.classList.remove("hide");
// stage.classList.add("hide");
//}
});
}
.hide {
display:none;
}
<form>
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project" checked="checked">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project hide">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>

Develop Reference

JavaScript is the programming language of the Web.

How to shuffle the vertical order of across different section labels? - javascript

Related

I am trying to create a rating system in html/js and i cant log more than one review [duplicate]

Why is my counter always equal to zero even after the correct radio button is pressed?

My countdown timer is not working

How Can I Cascade Radio Buttons In Javascript?

Javascript classlist object and query selector to toggle

Categories

Resources