Display one slide at a time in custom HTML slideshow - javascript

I'm trying to get my slideshow to present one image at a time. At the moment it shows all the selected images at once; I want one image shown at a time, like in a traditional slideshow with prev/next buttons. I feel like this is really simple and I'm over-thinking things. I've looked at tons of examples but my issue seems to be different from most because in my case the slideshow is different each time -- the images in the slideshow are based off user selected input, therefore the next or previous slide will most likely always be unique, dependent on the topics the user selected.
Anyone have any suggestions? Here is what I have:
$(document).ready(function() {
$("#view-content").on("click", function(e) {
for (var i = 0; i < 20; i++) {
if ($('#topic' + i).prop('checked')) {
$('.topic' + i).show();
} else {
$('.topic' + i).hide();
}
}
});
});
.column {
float: left;
width: 33.33%;
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type=checkbox] {}
.topic {
width: 200px;
height: 3em;
line-height: 3em;
background: #ccc;
border-radius: 50px;
text-align: center;
vertical-align: middle;
}
button {
border-radius: 50px;
border: none;
width: 10em;
height: 3em;
line-height: 3em;
}
.view {
display: block;
margin: 0 auto;
}
.selectall {
display: none;
}
.slideshow {
overflow: auto;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Topics</h1>
<h4>Or choose from popular search terms: </h4>
<div class="row">
<button type="button">term1</button>
<button type="button">term2</button>
<button type="button">term3</button>
<button type="button">term4</button>
<button type="button">term5</button>
<button type="button">term6</button>
<button type="button">term7</button>
<button type="button">term8</button>
<button type="button">term9</button>
<button type="button">term10</button>
</div>
<hr>
<div class="row">
<div class="column">
<div class="topic">
<input type="checkbox" id="topic1" />
<label for="topic1">Topic 1</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic2" />
<label for="topic2">Topic 2</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic3" />
<label for="topic3">Topic 3</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic4" />
<label for="topic4">Topic 4</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic5" />
<label for="topic5">Topic 5</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic6" />
<label for="topic6">Topic 6</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic7" />
<label for="topic7">Topic 7</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic8" />
<label for="topic8">Topic 8</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic9" />
<label for="topic9">Topic 9</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic10" />
<label for="topic10">Topic 10</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic11" />
<label for="topic11">Topic 11</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic12" />
<label for="topic12">Topic 12</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic13" />
<label for="topic13">Topic 13</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic14" />
<label for="topic14">Topic 14</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic15" />
<label for="topic15">Topic 15</label>
</div>
</div>
</div>
<br/>
<button type="button" class="view" id="view-content">View Content</button>
<div class="slideshow">
<img class="topic1 selectall" src="https://i.imgur.com/Kf2zBCB.jpg" />
<img class="topic2 selectall" src="https://i.imgur.com/Sd44gRr.jpg" />
<img class="topic3 selectall" src="https://i.imgur.com/5t6Qp5y.jpg" />
<img class="topic4 selectall" src="https://i.imgur.com/5vyPC7P.jpg" />
<img class="topic5 selectall" src="https://i.imgur.com/H400nzy.jpg" />
<img class="topic6 selectall" src="https://i.imgur.com/MXVqtDe.jpg" />
<img class="topic7 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic8 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic9 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic10 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic11 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic12 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic13 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic14 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic15 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
</div>


You have a standard slideshow, regardless of the fact that only some images are shown. The markup is still the same -- the only different is display: none is applied to some images.
Depending on the type of slideshow you want, you just need to add in some arrows for the user to click on before your first image and after your last image, possibly with pseudo-classes :before:-first-of-type and :after:last-of-type.
Alternatively, you could just usea little bit of extra JavaScript / jQuery to get things working:
$(".slideshow > img:gt(0)").hide();
setInterval(function() {
$('.slideshow > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow');
}, 3000);
Which will hide all slides, then fade in the slides one after another, and can be seen in the following:
$(document).ready(function() {
$("#view-content").on("click", function(e) {
for (var i = 0; i < 20; i++) {
if ($('#topic' + i).prop('checked')) {
$('.topic' + i).show();
} else {
$('.topic' + i).hide();
}
}
$(".slideshow > img:gt(0)").hide();
setInterval(function() {
$('.slideshow > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow');
}, 3000);
});
});
.column {
float: left;
width: 33.33%;
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type=checkbox] {}
.topic {
width: 200px;
height: 3em;
line-height: 3em;
background: #ccc;
border-radius: 50px;
text-align: center;
vertical-align: middle;
}
button {
border-radius: 50px;
border: none;
width: 10em;
height: 3em;
line-height: 3em;
}
.view {
display: block;
margin: 0 auto;
}
.selectall {
display: none;
}
.slideshow {
overflow: auto;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Topics</h1>
<h4>Or choose from popular search terms: </h4>
<div class="row">
<button type="button">term1</button>
<button type="button">term2</button>
<button type="button">term3</button>
<button type="button">term4</button>
<button type="button">term5</button>
<button type="button">term6</button>
<button type="button">term7</button>
<button type="button">term8</button>
<button type="button">term9</button>
<button type="button">term10</button>
</div>
<hr>
<div class="row">
<div class="column">
<div class="topic">
<input type="checkbox" id="topic1" />
<label for="topic1">Topic 1</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic2" />
<label for="topic2">Topic 2</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic3" />
<label for="topic3">Topic 3</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic4" />
<label for="topic4">Topic 4</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic5" />
<label for="topic5">Topic 5</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic6" />
<label for="topic6">Topic 6</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic7" />
<label for="topic7">Topic 7</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic8" />
<label for="topic8">Topic 8</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic9" />
<label for="topic9">Topic 9</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic10" />
<label for="topic10">Topic 10</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic11" />
<label for="topic11">Topic 11</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic12" />
<label for="topic12">Topic 12</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic13" />
<label for="topic13">Topic 13</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic14" />
<label for="topic14">Topic 14</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic15" />
<label for="topic15">Topic 15</label>
</div>
</div>
</div>
<br/>
<button type="button" class="view" id="view-content">View Content</button>
<div class="slideshow">
<img class="topic1 selectall" src="https://i.imgur.com/Kf2zBCB.jpg" />
<img class="topic2 selectall" src="https://i.imgur.com/Sd44gRr.jpg" />
<img class="topic3 selectall" src="https://i.imgur.com/5t6Qp5y.jpg" />
<img class="topic4 selectall" src="https://i.imgur.com/5vyPC7P.jpg" />
<img class="topic5 selectall" src="https://i.imgur.com/H400nzy.jpg" />
<img class="topic6 selectall" src="https://i.imgur.com/MXVqtDe.jpg" />
<img class="topic7 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic8 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic9 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic10 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic11 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic12 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic13 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic14 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic15 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
</div>

Related

Unable to submit the form successfully using Javascript

Here is a code for Quiz app using HTML,CSS and JavaScript. You are given with a few questions and you need to choose one of the options from each question then click submit. The total score secured should be shown in the "You have scored ____ marks". However,there is no change in score when I click submit.
Here is the code for both HTML,CSS and Javascript. Please correct the code and let me know where I did wrong.
<!DOCTYPE html>
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header{
text-align: center;
color:red;
margin-top:100px;
font-size: 100px;
}
.main{
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li{
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1{
border:2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color:red;
}
.span{
font-size: 50px;
color:salmon;
border:2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br>
<div class="main">
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br>
<input type='radio' name='Q1' id='Option-1'value='Option 1' >
<label style="color:white;" for="Option-1">Option 1</label><br>
<br>
<input type='radio' name='Q1' id='Option-2' value='Option 2'>
<label style="color:white;" for="Option-2">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br>
<input type='radio' name='Q2' id='Option-3'value='Option 1' >
<label style="color:white;" for="Option-3">Option 1</label><br>
<br>
<input type='radio' name='Q2' id='Option-4' value='Option 2'>
<label style="color:white;" for="Option-4">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br>
<input type='radio' name='Q3' id='Option-5' value='Option 1'>
<label style="color:white;" for="Option-5">Option 1</label><br>
<br>
<input type='radio' name='Q3' id='Option-6'value='Option 2'>
<label style="color:white;" for="Option-6">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br>
<input type='radio' name='Q4' id='Option-7' value='Option 1'>
<label style="color:white;" for="Option-7">Option 1</label><br>
<br>
<input type='radio' name='Q4' id='Option-8' value='Option 2'>
<label style="color:white;" for="Option-8">Option 2</label><br>
<br> <br><br>
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;">
</div>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1" >Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script src="Quiz.js"></script>
</body>
</html>
Javascript :-
const correctAnswers=['Option 1','Option 2','Option 2','Option 1'];
const form = document.querySelector(".quiz-form");
let score=0;
form.addEventListener('submit',()=>{
form.preventDefault();
const userAnswers=[form.Q1.value,form.Q2.value,form.Q3.value,form.Q4.value];
userAnswers.forEach((answer,index)=>{
if(answer==correctAnswers[index]){
score+=20;
}
console.log(score);
});
const result=document.querySelector(".result")
result.querySelector("span").textContent= '${score}';
});

You need a form element, just wrap the whole quiz in one.
Problem #2, preventDefault() is an event function not a element one, something like this:
form.addEventListener('submit', e => {
e.preventDefault();
// more things .....
});
Finally, you're not interpolating score correctly, use back-ticks, i.e.:
result.querySelector('span').textContent = `${score}`;
Here's a working example with the changes I suggested:
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header {
text-align: center;
color: red;
margin-top: 100px;
font-size: 100px;
}
.main {
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li {
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1 {
border: 2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color: red;
}
.span {
font-size: 50px;
color: salmon;
border: 2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br />
<div class="main">
<form>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br />
<input type="radio" name="Q1" id="Option-1" value="Option 1" />
<label style="color:white;" for="Option-1">Option 1</label><br />
<br />
<input type="radio" name="Q1" id="Option-2" value="Option 2" />
<label style="color:white;" for="Option-2">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br />
<input type="radio" name="Q2" id="Option-3" value="Option 1" />
<label style="color:white;" for="Option-3">Option 1</label><br />
<br />
<input type="radio" name="Q2" id="Option-4" value="Option 2" />
<label style="color:white;" for="Option-4">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br />
<input type="radio" name="Q3" id="Option-5" value="Option 1" />
<label style="color:white;" for="Option-5">Option 1</label><br />
<br />
<input type="radio" name="Q3" id="Option-6" value="Option 2" />
<label style="color:white;" for="Option-6">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br />
<input type="radio" name="Q4" id="Option-7" value="Option 1" />
<label style="color:white;" for="Option-7">Option 1</label><br />
<br />
<input type="radio" name="Q4" id="Option-8" value="Option 2" />
<label style="color:white;" for="Option-8">Option 2</label><br />
<br />
<br /><br />
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;" id="submit_button" />
</div>
</form>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1">Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script>
const correctAnswers = ['Option 1', 'Option 2', 'Option 2', 'Option 1'];
const form = document.querySelector('form');
let score = 0;
form.addEventListener('submit', e => {
e.preventDefault();
const userAnswers = [form.Q1.value, form.Q2.value, form.Q3.value, form.Q4.value];
userAnswers.forEach((answer, index) => {
if (answer == correctAnswers[index]) {
score += 20;
}
console.log(score);
});
const result = document.querySelector('.result');
result.querySelector('span').textContent = `${score}`;
});
</script>
</body>
</html>

Javascript only radio buttons containing children with the same class should appear

I have been locked in this logic for 2 weeks, I need to do that only the "div" containing the "linha-opcao-resposta" class that has other children with the same class.
In other words.
I need to make the children of the "div" input parent containing "div" children with the same parent class when selected appear and hide the others from the group of radio buttons
Look in the example below.
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
<input type="hidden" title="" id="7329_2338" name="hidden_2338">
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7330_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="0">
<label for="7330_2370" title="">Não</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7331_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="1">
<label for="7331_2370" title="">Sim </label>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7331_2371" title="">27.3.1 Agente 1</label>
<input type="text" title="" id="7331_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_1" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7332_2371" title="">27.3.2 Agente 2</label>
<input type="text" title="" id="7332_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_2" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7333_2371" title="">27.3.3 Agente 3</label>
<input type="text" title="" id="7333_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_3" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7334_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="2">
<label for="7334_2370" title="">Exame não realizado</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7405_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="3">
<label for="7405_2370" title="">Não se aplica</label>
</div>
</div>
</div>
only radio buttons containing children with the same class of "linha-opcao-resposta" should appear, other radio buttons that do not contain, should make those containing children disappear.
I tried to do it this way, but without success.
$('input[type="radio"]').on('change', function () {
var element = $(this);
var pais = element.parent().parent();
var filhos;
var aux = 0;
pais.forEach(pai => {
if (element.val() == aux) {
filhos = pai.children();
if (filhos.length > 1) {
for (var j = 0; j < filhos.length; j++) {
filhos[j].style.display = "block";
}
}
}
else {
filhos = pai.children();
for (var k = 0; k < filhos.length; j++) {
filhos[k].style.display = "none";
}
}
aux++;
});

First set display = 'none' to all radio button's parent. Then set display = 'block' only to the radio button's parents matching the condition. Try the following way:
var radio = document.querySelectorAll('input[type=radio]');
radio.forEach(function(radEl){
radEl.parentElement.style.display = 'none';
});
var radShow = document.querySelectorAll('div.linha-opcao-resposta + div.linha-opcao-resposta > div > input[type=radio]');
radShow.forEach(function(radEl){
radEl.parentElement.style.display = 'block';
});
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
<input type="hidden" title="" id="7329_2338" name="hidden_2338">
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7330_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="0">
<label for="7330_2370" title="">Não</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7331_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="1">
<label for="7331_2370" title="">Sim </label>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7331_2371" title="">27.3.1 Agente 1</label>
<input type="text" title="" id="7331_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_1" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7332_2371" title="">27.3.2 Agente 2</label>
<input type="text" title="" id="7332_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_2" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7333_2371" title="">27.3.3 Agente 3</label>
<input type="text" title="" id="7333_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_3" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7334_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="2">
<label for="7334_2370" title="">Exame não realizado</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7405_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="3">
<label for="7405_2370" title="">Não se aplica</label>
</div>
</div>
</div>

Change the value of a variable when an image is selected

I want to select one image among four of them. And then the variable that i have should be increased. If i select other image then the variable should change and take the value of that image. Here is the code i have so far that does not work
HTML
<div class="checkbox">
<input type="checkbox" name="paroxi" value="10"><br>
</div>
CSS
.checkbox{
width: 23px;
height: 21px;
background: black;
visibility:hidden;
}
.checked{
background: red;
visibility:block;
}
JAVASCRIPT
$(".checkbox").click(function(){
$(this).toggleClass('checked')
});

If you wanna keep the checkboxes, guess to post price value later, than you can do it this way:
$('.image-selection input').on('change', function(e) {
$('.selected-value').text( $('.image-selection input:checked').val() );
}).trigger('change');
.image-selection input {
display: none;
}
.image-selection input:checked + img {
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-selection">
<label for="checkbox-1">
<input id="checkbox-1" name="image-input" type="radio" value="10" checked="checked" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-2">
<input id="checkbox-2" name="image-input" type="radio" value="20" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-3">
<input id="checkbox-3" name="image-input" type="radio" value="30" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-4">
<input id="checkbox-4" name="image-input" type="radio" value="40" />
<img src="http://placehold.it/150x150" />
</label>
</div>
<p>Price: <span class="selected-value"></span></p>
Also on JSFiddle.

dynamically generated ID's needs to be radio buttons name as attribute

I have two radio buttons groups containing three options each and i have added group id's dynamically.
What i wanted is: for each group - radio name must match with its relevant group id name
group1 contains three radio buttons with name attribute group1
group2 contains three radio buttons with name attribute group2
//this script is used to add groupid's
$('.wraper').each(function(i) {
$(this).attr('id', "group" + (i + 1));
});
input[type=radio],
input[type=radio]+div {
display: none;
}
input[type=radio]:checked+div {
display: flex;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wraper">
<div class="col-sm-12">
<label class="checkedClass tabboxfor" for="a">a</label>
<label class="tabboxfor" for="b">b</label>
<label class="tabboxfor" for="c">c</label>
</div>
<div class="col-xs-12">
<input type="radio" id="a" class="" checked="checked" />
<div class="box">
<p>a</p>
</div>
<input type="radio" id="b" class="" />
<div class="box">
<p>a</p>
</div>
<input type="radio" id="c" class="" />
<div class="box">
<p>c</p>
</div>
</div>
</div>
<div class="wraper">
<div class="col-sm-12">
<label class="checkedClass tabboxfor" for="x">x</label>
<label class="tabboxfor" for="y">y</label>
<label class="tabboxfor" for="z">z</label>
</div>
<div class="col-xs-12">
<input type="radio" id="x" class="" checked="checked" />
<div class="box">
<p>xxx</p>
</div>
<input type="radio" id="y" class="" />
<div class="box">
<p>yyy</p>
</div>
<input type="radio" id="z" class="" />
<div class="box">
<p>zzz</p>
</div>
</div>
</div>

Use .find() to target :radio element to set .attr()
$('.wraper').each(function(i) {
var groupId = "group" + (i + 1);
$(this).attr('id', groupId );
$(this).find(':radio').attr('name', groupId);
});
//this script is used to add groupid's
$('.wraper').each(function(i) {
$(this).attr('id', "group" + (i + 1));
$(this).find(':radio').attr('name', this.id)
});
input[type=radio],
input[type=radio]+div {
display: none;
}
input[type=radio]:checked+div {
display: flex;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wraper" id="group1">
<div class="col-sm-12">
<label class="checkedClass tabboxfor" for="a">a</label>
<label class="tabboxfor" for="b">b</label>
<label class="tabboxfor" for="c">c</label>
</div>
<div class="col-xs-12">
<input type="radio" id="a" class="" checked="checked" />
<div class="box">
<p>a</p>
</div>
<input type="radio" id="b" class="" />
<div class="box">
<p>a</p>
</div>
<input type="radio" id="c" class="" />
<div class="box">
<p>c</p>
</div>
</div>
</div>
<div class="wraper" id="group2">
<div class="col-sm-12">
<label class="checkedClass tabboxfor" for="x">x</label>
<label class="tabboxfor" for="y">y</label>
<label class="tabboxfor" for="z">z</label>
</div>
<div class="col-xs-12">
<input type="radio" id="x" class="" checked="checked" />
<div class="box">
<p>xxx</p>
</div>
<input type="radio" id="y" class="" />
<div class="box">
<p>yyy</p>
</div>
<input type="radio" id="z" class="" />
<div class="box">
<p>zzz</p>
</div>
</div>
</div>

As I understand you mean this - you want inputs inside wrapper to follow naming rules.Correct?
$('.wraper').each(function(i) {
var groupId = "group" + (i + 1);
$(this).attr('id', groupId );
$(this).find('input').attr('name', groupId );
});

If my understanding is correct this is what you are expecting :
$('.wraper').each(function(i) {
$(this).attr('id', "group" + (i + 1));
$(this).children("input"). each (function (){
$(this).attr("name","group" + (I+1));
});
});

Why isn't this show/hide script working? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm following a tutorial online for creating a show/hide function in javascript to an html5 form and from what I can see everything is spot on. Dreamweaver isn't showing any syntax errors so I really don't understand why it's not working.
Here's the Javascript
function beginner(){
var showA = document.getElementById("q1a1");
var hideA = document.getElementByClassName("ab");
for (var i = 0; i != hideA.length; i++){
if(showA.clicked){
hideA[i].style.display="block";
}
else{
hideA[i].style.display = "none";
}
}/**for loop**/
}/**function**/
here's the CSS
.qbox1{
background-color:#0F9;
width:600px;
height:auto;
margin:auto;
}
.ab{
background-color:#C63;
width:600px;
height:auto;
margin:auto;
display:none;
}
.cd{
background-color:#C63;
width:600px;
height:auto;
margin:auto;
display:none;
}
.ques1{
background-color:#09F;
width:600px;
height:auto;
text-align:center;
}
.anscont{
background-color:#390;
width:500px;
height:40px;
margin:auto;
}
.left-label{
background-color:#CC9;
width:55px;
height:20px;
font-size:8pt;
text-align:center;
float:left;
position:relative;
top:10px;
left:10px;
}
.right-label{
background-color:#CC9;
width:55px;
height:20px;
font-size:8pt;
text-align:center;
float:right;
position:relative;
bottom:30px;
right: 10px;
}
.radcont{
width:340px;
height:40px;
background-color:#096;
margin:auto;
}
.radbox{
width:10%;
height:40px;
float:left;
margin:auto;
background-color:#CC9;
}
.radbox label{
text-align:center;
display:block;
}
.radbox input{
margin:auto;
width: 90%;
display:block;
Here's the html
<form>
<div class="qbox1">
<div class="ques1">
Where are you in terms of operating your Business?
</div>
<input type="radio" name="ques01" value="I just started planning everything" id="q1a1" onClick="beginner()">
<label for="q1a1">I just started planning everything.</label><br />
<input type="radio" name="ques01" value="I’ve been planning for a while and am working on getting it started once and for all." id="q1a2">
<label for="q1a2">I’ve been planning for a while and am working on getting it started once and for all.</label><br />
<input type="radio" name="ques01" value="I’m about to open soon." id="q1a3">
<label for="q1a3">I’m about to open soon.</label><br />
<input type="radio" name="ques01" value="I’m already open for Business." id="q1a4">
<label for="q1a4">I’m about to open soon.</label><br />
</div><br />
<div class="ab">
<div class="ques1">
This is where the Question will go<br />
</div>
<div class="anscont">
<div class="left-label">
Left Text
</div>
<div class="radcont">
<div class="radbox">
<label for="q2a1">1</label>
<input type="radio" name="question01" id="q2a1">
</div>
<div class="radbox">
<label for="q2a2">2</label>
<input type="radio" name="question01" id="q2a2">
</div>
<div class="radbox">
<label for="q2a3">3</label>
<input type="radio" name="question01" id="q2a3">
</div>
<div class="radbox">
<label for="q2a41">4</label>
<input type="radio" name="question01" id="q2a4">
</div>
<div class="radbox">
<label for="q2a5">5</label>
<input type="radio" name="question01" id="q2a5">
</div>
<div class="radbox">
<label for="q2a61">6</label>
<input type="radio" name="question01" id="q2a6">
</div>
<div class="radbox">
<label for="q2a7">7</label>
<input type="radio" name="question01" id="q2a7">
</div>
<div class="radbox">
<label for="q2a8">8</label>
<input type="radio" name="question01" id="q2a8">
</div>
<div class="radbox">
<label for="q2a9">9</label>
<input type="radio" name="question01" id="q2a9">
</div>
<div class="radbox">
<label for="q2a10">10</label>
<input type="radio" name="question01" id="q2a10">
</div>
</div> <!--radcont-->
<div class="right-label">
Right Text
</div>
</div><!--anscont-->
</div><!--ab--><br />
<div class="cd">
<div class="ques1">
This is where the Question will go<br />
</div>
<div class="anscont">
<div class="left-label">
Left Text
</div>
<div class="radcont">
<div class="radbox">
<label for="q2a1">1</label>
<input type="radio" name="question01" id="q2a1">
</div>
<div class="radbox">
<label for="q2a2">2</label>
<input type="radio" name="question01" id="q2a2">
</div>
<div class="radbox">
<label for="q2a3">3</label>
<input type="radio" name="question01" id="q2a3">
</div>
<div class="radbox">
<label for="q2a41">4</label>
<input type="radio" name="question01" id="q2a4">
</div>
<div class="radbox">
<label for="q2a5">5</label>
<input type="radio" name="question01" id="q2a5">
</div>
<div class="radbox">
<label for="q2a61">6</label>
<input type="radio" name="question01" id="q2a6">
</div>
<div class="radbox">
<label for="q2a7">7</label>
<input type="radio" name="question01" id="q2a7">
</div>
<div class="radbox">
<label for="q2a8">8</label>
<input type="radio" name="question01" id="q2a8">
</div>
<div class="radbox">
<label for="q2a9">9</label>
<input type="radio" name="question01" id="q2a9">
</div>
<div class="radbox">
<label for="q2a10">10</label>
<input type="radio" name="question01" id="q2a10">
</div>
</div> <!--radcont-->
<div class="right-label">
Right Text
</div>
</div><!--anscont-->
</div><!--cd--><br />
</form>

As far as I could tell, you only had three mistakes:
1) getElementByClassName should be getElementsByClassName
2) There's no .clicked but .checked
3) On your <input> tag you have onClick when it should be onclick.
function beginner(){
var showA = document.getElementById("q1a1");
var hideA = document.getElementsByClassName("ab");
for (var i = 0; i != hideA.length; i++){
if(showA.checked){
hideA[i].style.display="block";
}
else{
hideA[i].style.display = "none";
}
}/**for loop**/
}/**function**/
.qbox1{
background-color:#0F9;
width:600px;
height:auto;
margin:auto;
}
.ab{
background-color:#C63;
width:600px;
height:auto;
margin:auto;
display:none;
}
.cd{
background-color:#C63;
width:600px;
height:auto;
margin:auto;
display:none;
}
.ques1{
background-color:#09F;
width:600px;
height:auto;
text-align:center;
}
.anscont{
background-color:#390;
width:500px;
height:40px;
margin:auto;
}
.left-label{
background-color:#CC9;
width:55px;
height:20px;
font-size:8pt;
text-align:center;
float:left;
position:relative;
top:10px;
left:10px;
}
.right-label{
background-color:#CC9;
width:55px;
height:20px;
font-size:8pt;
text-align:center;
float:right;
position:relative;
bottom:30px;
right: 10px;
}
.radcont{
width:340px;
height:40px;
background-color:#096;
margin:auto;
}
.radbox{
width:10%;
height:40px;
float:left;
margin:auto;
background-color:#CC9;
}
.radbox label{
text-align:center;
display:block;
}
.radbox input{
margin:auto;
width: 90%;
display:block;
}
<form>
<div class="qbox1">
<div class="ques1">
Where are you in terms of operating your Business?
</div>
<input type="radio" name="ques01" value="I just started planning everything" id="q1a1" onchange="beginner()">
<label for="q1a1">I just started planning everything.</label><br />
<input type="radio" name="ques01" value="I’ve been planning for a while and am working on getting it started once and for all." id="q1a2" onchange="beginner()">
<label for="q1a2">I’ve been planning for a while and am working on getting it started once and for all.</label><br />
<input type="radio" name="ques01" value="I’m about to open soon." id="q1a3" onchange="beginner()">
<label for="q1a3">I’m about to open soon.</label><br />
<input type="radio" name="ques01" value="I’m already open for Business." id="q1a4" onchange="beginner()">
<label for="q1a4">I’m about to open soon.</label><br />
</div><br />
<div class="ab">
<div class="ques1">
This is where the Question will go<br />
</div>
<div class="anscont">
<div class="left-label">
Left Text
</div>
<div class="radcont">
<div class="radbox">
<label for="q2a1">1</label>
<input type="radio" name="question01" id="q2a1">
</div>
<div class="radbox">
<label for="q2a2">2</label>
<input type="radio" name="question01" id="q2a2">
</div>
<div class="radbox">
<label for="q2a3">3</label>
<input type="radio" name="question01" id="q2a3">
</div>
<div class="radbox">
<label for="q2a41">4</label>
<input type="radio" name="question01" id="q2a4">
</div>
<div class="radbox">
<label for="q2a5">5</label>
<input type="radio" name="question01" id="q2a5">
</div>
<div class="radbox">
<label for="q2a61">6</label>
<input type="radio" name="question01" id="q2a6">
</div>
<div class="radbox">
<label for="q2a7">7</label>
<input type="radio" name="question01" id="q2a7">
</div>
<div class="radbox">
<label for="q2a8">8</label>
<input type="radio" name="question01" id="q2a8">
</div>
<div class="radbox">
<label for="q2a9">9</label>
<input type="radio" name="question01" id="q2a9">
</div>
<div class="radbox">
<label for="q2a10">10</label>
<input type="radio" name="question01" id="q2a10">
</div>
</div> <!--radcont-->
<div class="right-label">
Right Text
</div>
</div><!--anscont-->
</div><!--ab--><br />
<div class="cd">
<div class="ques1">
This is where the Question will go<br />
</div>
<div class="anscont">
<div class="left-label">
Left Text
</div>
<div class="radcont">
<div class="radbox">
<label for="q2a1">1</label>
<input type="radio" name="question01" id="q2a1">
</div>
<div class="radbox">
<label for="q2a2">2</label>
<input type="radio" name="question01" id="q2a2">
</div>
<div class="radbox">
<label for="q2a3">3</label>
<input type="radio" name="question01" id="q2a3">
</div>
<div class="radbox">
<label for="q2a41">4</label>
<input type="radio" name="question01" id="q2a4">
</div>
<div class="radbox">
<label for="q2a5">5</label>
<input type="radio" name="question01" id="q2a5">
</div>
<div class="radbox">
<label for="q2a61">6</label>
<input type="radio" name="question01" id="q2a6">
</div>
<div class="radbox">
<label for="q2a7">7</label>
<input type="radio" name="question01" id="q2a7">
</div>
<div class="radbox">
<label for="q2a8">8</label>
<input type="radio" name="question01" id="q2a8">
</div>
<div class="radbox">
<label for="q2a9">9</label>
<input type="radio" name="question01" id="q2a9">
</div>
<div class="radbox">
<label for="q2a10">10</label>
<input type="radio" name="question01" id="q2a10">
</div>
</div> <!--radcont-->
<div class="right-label">
Right Text
</div>
</div><!--anscont-->
</div><!--cd--><br />
</form>

Below line check the spelling of getElementsByClassName method
var hideA = document.getElementsByClassName("ab");
Also change showA.clicked into showA.checked
onClick should be onclick

Categories

Resources