I'm trying to manage triggered events on buttons but I can't get the exact result. By default, the div id="mailArea" is displayed but when I click on web button, I would like that this div is hidden and vice-versa.
Can someone help me please?
Thanks in advance!
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
#mailwebArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
<div id="choiceMail">
<input type= "radio" name="mail_type" value="text" onchange="$('#result').hide()" checked > Texte
<input type="radio" name="mail_type" value="web" onchange="$('#result').show()"> Web
<div>
<div id="mailArea"></div>
</div>
</div>
<div id="result" style="display:none">
<button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-weight: https://jsfiddle.net/t44aqpw0/3/#forkbold; font-size: 12px;' onclick='commande('bold');' title='Mettre votre en gras'>G</button>
<button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-style: italic; font-size: 12px;' onclick='commande('italic');' title='Mettre votre texte en italique'>I</button>
<button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-style: italic; font-size: 12px;' onclick='commande('underline');' title='Soulignez votre texte'>S</button> <button class='btn btn-primary btn-md' onclick='taille('+', 'mailArea')' style='height: 25px; width: 30px; padding: 0' title='Augmenter la taille du texte'><span class='glyphicon glyphicon-plus'></span> </button>
<button class='btn btn-primary btn-md' onclick='taille('-', 'mailArea')' style='height: 25px; width: 30px; padding: 0' title='Diminuer la taille du texte'><span class='glyphicon glyphicon-minus'></span> </button>
<div id='mailwebArea' class='form-control animated' contenteditable='true'></div>
<div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Here is a simple show/hide of your 'mailArea' div based on radio buttons selections:
$('input[type=radio][name=mail_type]').on('change', function() {
if ($(this).val() == 'text') {
$('#mailArea').show();
} else if ($(this).val() == 'web') {
$('#mailArea').hide();
}
});
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
#mailwebArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="choiceMail">
<input type="radio" name="mail_type" value="text" checked> Texte
<input type="radio" name="mail_type" value="web"> Web
<div>
<div id="mailArea">Mail area container</div>
</div>
</div>
$(document).ready(function() {
$("input[name$='cars']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#Cars" + test).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myRadioGroup">
Texte<input type="radio" name="cars" checked="checked" value="2" />
Web<input type="radio" name="cars" value="3" />
<div id="Cars2" class="desc">
Display
</div>
</div>
You can add $('#mailArea').hide() on onchange attribute of input[type=radio]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="choiceMail">
<input type= "radio" name="mail_type" value="text" onchange="$('#result').hide();$('#mailArea').show();" checked > Texte
<input type="radio" name="mail_type" value="web" onchange="$('#result').show();$('#mailArea').hide();"> Web
<div>
<div id="mailArea">mailArea</div>
</div>
</div>
Track the button onclick event. From there, check if div is currently shown. If yes then hide it. If hidden, then show it.
$('#yourButtonId').on('click', function(){
var divElement = $('#yourDivId');
var isVisible = divElement.is(':visible');
if(isVisible == true){
divElement.hide();
}
else {
divElement.show();
}
});
Related
I'm creating a "social media comment section" (you can add your own comments by typing in a comment box at the bottom.) I want to add an edit button which can change as to what ever comment the edit button was clicked on. I am very unfamiliar with how do to do this. I've tried adding a click function that creates a text box where you can put text into but it creates the text box on every comment that has an edit button. How can I make the "Edit" button more specific to which ever comment was clicked?
$(document).ready(function(){
let value;
let storeValues = []
let storeValueName;
let storeValueComment;
$('#addComment').click(function(){
storeValueName = getName();
storeValueComment = getComment();
storeValues.push(storeValueName);
storeValues.push(storeValueComment);
value = getName() + getComment();
function getName(){
let grabName;
$('#name').val(function(i, v){
grabName = v;
})
return grabName;
}
function getComment(){
let grabComment;
$('#bodyText').val(function(i, v){
grabComment = v;
})
return grabComment
}
console.log(storeValues);
$('.eachComment').prepend('<div class="comments">' +'<img class="imgClass" src="userImage.jpg">'+'<p class="nameVal">'
+ storeValueName +'</p>' + '<p class="commentVal">'+ storeValueComment +'</p>'+
'<input type="button" id="edit" value="Edit" />'+ '<input type="button" id="delete" value="Delete" />' + '</div>');
$('#edit').click(function(){
})
})
})
body{
background-color: #E5E5E5
}
#wholeForm{
margin: 0 auto;
width: 800px;
height: 400px;
position: relative;
background-color: #D3D3D3;
font-family: helvetica;
}
#question{
padding: 0px;
margin: 0px;
width: 780px;
height: 75px;
background-color: white;
padding:10px;
}
#nameOfPerson{
font-size:13px;
margin: 0;
padding: 0;
}
#commentOfPerson{
font-size:25px;
font-weight: bold;
margin: 0;
padding: 0;
}
.form2{
width: 800px;
height: 458px;
}
.comments{
background-color: white;
width: 780px;
height: 75px;
position: relative;
margin: 10px;
}
.form1{
padding:20px;
margin-bottom: 10px;
width: 758px;
position: absolute;
bottom: -10px;
background-color: white;
}
#addComment{
display: inline-block;
margin-left: 35px;
}
#name{
width: 125px;
}
#bodyText{
width: 500px;
}
.formInput{
display: inline-block;
}
.nameVal{
display: inline-block;
font-size: 12px;
position: absolute;
}
.commentVal{
display: inline-block;
position: absolute;
font-weight: bold;
font-size: 18px;
bottom: 5px;
}
.imgClass{
display: inline-block;
height: 65px;
width: 65px;
margin: 5px;
}
#edit{
position: absolute;
right:55px;
border: none;
text-decoration: underline;
color:#30D5C8;
background-color:white;
margin:5px;
}
#delete{
position: absolute;
right:0px;
border: none;
text-decoration: underline;
color:#30D5C8;
background-color:white;
margin:5px;
}
#edit:hover{
color:#DDA0DD
}
#delete:hover{
color:#DDA0DD
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='style.css' type='text/css' rel='stylesheet' />
</head>
<body>
<div id='wholeForm'>
<div id="question">
<p id="nameOfPerson">WhySoSerious45</p>
<p id="commentOfPerson">Trying to decide a career path? Programming is the move. Change my mind.</p>
</div>
<div class='form2'>
<div class='eachComment'>
<div class="comments">
<img class="imgClass" src="userImage.jpg">
<p class="nameVal">Jonny R</p>
<p class="commentVal">I wish I knew how to program! Maybe ill start learning?</p>
<input type="button" id="edit" value="Edit">
<input type="button" id="delete" value="Delete">
</div>
</div>
</div>
<div class='form1'>
<div class='formInput'>
<input type="text" id="name" placeholder="Display Name"/>
<input type='text' id="bodyText" placeholder="Comment"></textarea>
</div>
<input type="button" id="addComment" value="Submit">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.slim.min.js" integrity="sha256-MlusDLJIP1GRgLrOflUQtshyP0TwT/RHXsI1wWGnQhs=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
To answer your question in a general sense…
When you add an event listener, the specific element will show up on the event's target property. So, if we had something like this:
<div class="posts">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
We could actually add a click handler to the div, because events "bubble" up to it.
document.querySelector('.posts').addEventListener('click' (e) => {
console.log(e.target.textContent); // Button 1, Button 2, etc.
});
I am designing a website and I want to show the content just when they click on a button and hide when they click again.
I was able to find a solution but I have to write a different function for all buttons. I tried a few things but couldn't make it. I'll be so glad if you help me. ;)
I hide the buttons by display: none; and the button works with this function :
function funcategory() {
var a = document.getElementById("category");
if (a.style.display === "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
I have to write a different function for all button.
is there a way that I use this for all?
I tried this but it didn't work :
function funcategory(x) {
var a = document.getElementById(x);
if (a.style.display === "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
and here's the content which has to be shown whrn the button click(and be hiden when clicked again):
<!--category------------------------------------------------->
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
here is the main button:
<button id="topbtn" onclick="funcategory()">Category</button
here is the full code:
<!DOCTYPE html>
<html>
<head>
<title>balalar</title>
<style>
body{
background-color: #ff5993; }
#topbtn{
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#categorybtn{
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#category{
display: none;}
#contactus{
background-color: #dddddd;
font-size: 25px;
display: none;}
</style>
<script>
function funcategory() {
var a = document.getElementById("category");
if (a.style.display === "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
</script>
</head>
<body>
<h1 color="#0e0a0e"><center>BALALAR</center></h1>
<center>
<button id="topbtn" onclick="funcontact()">Contact us</button>
<button id="topbtn">Random</button>
<button id="topbtn" onclick="funcategory()">Category</button>
<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>
</center>
<hr color="black" style="height: 3px; width: 1100px"/>
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactus">
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
<center>
</div>
</body>
</html>
First of all id cannot be duplicate. You can use class as an alternative. and use document.querySelectorAll to get all the buttons. Also add an attribute data-type you can name it any thing but has to have data- as prefix & data-button value will be used to target the section which will be hidden/shown. For example check the data-type of the section. After that you can use classList.toggle which will hide/remove class to toggle the visibility
document.querySelectorAll('.topbtn').forEach(function(item) {
let getBtnData = item.dataset.button;
item.addEventListener('click', function(e) {
document.querySelector('[data-type="' + getBtnData + '"]').classList.toggle('visibility')
})
})
body {
background-color: #ff5993;
}
.topbtn {
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#categorybtn {
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#category {
display: none;
}
#contactus {
background-color: #dddddd;
font-size: 25px;
display: none;
}
.visibility {
display: block !important;
}
<h1 color="#0e0a0e">
<center>BALALAR</center>
</h1>
<center>
<button class="topbtn" data-button='contact'>Contact us</button>
<button class="topbtn">Random</button>
<button class="topbtn" data-button='category'>Category</button>
<!--<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>-->
</center>
<hr color="black" style="height: 3px; width: 1100px" />
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="category" data-type='category'>
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactus" data-type='contact'>
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
<center>
</div>
function funcategory(elem) {
if (elem.style.display === "none") {
elem.style.display = "block";
} else {
elem.style.display = "none";
}
}
<div id="category">
<center>
<button id="categorybtn" onclick="funcategory(this)">Actors</button>
<button id="categorybtn" onclick="funcategory(this)">Singers</button>
<button id="categorybtn" onclick="funcategory(this)">Instagram user</button>
<button id="categorybtn" onclick="funcategory(this)">Model</button>
<button id="categorybtn" onclick="funcategory(this)">Others</button>
<button id="categorybtn" onclick="funcategory(this)">XXX</button>
</center>
</div>
<!DOCTYPE html>
<html>
<head>
<title>balalar</title>
<style>
body{
background-color: #ff5993; }
#topbtn{
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#categorybtn{
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#category{
display: none;}
#contactus{
background-color: #dddddd;
font-size: 25px;
display: none;}
</style>
<script>
function funcategory() {
var a = document.getElementById("category");
if (a.style.display === "") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
</script>
</head>
<body>
<h1 color="#0e0a0e"><center>BALALAR</center></h1>
<center>
<button id="topbtn" onclick="funcontact()">Contact us</button>
<button id="topbtn">Random</button>
<button id="topbtn" onclick="funcategory()">Category</button>
<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>
</center>
<hr color="black" style="height: 3px; width: 1100px"/>
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactus">
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
<center>
</div>
</body>
</html>
you want to show the content when the Category button is clicked and you want to hide the content if the category button is clicked again. Is that what you want ?
If so instead of checking
if (a.style.display === "none")
you can check as
if (a.style.display === "")
If you want to avoid javascript all together, you can do this with a check box and some fancy css.
Here we use the label tag with an associated check box. Clicking the label toggles the status of the checkbox. We can then use the :checked pseudo class with ~ , the Adjacent sibling selector to toggle display:none;
/*This is the magic - Hide the div next to a checkbox that is checked.
It will show when unchecked courtesy of the associated label */
.toggler:checked + div {
display:none;
}
/*HIde our toggling checkboxes*/
.toggler {display:none;}
body {
background-color: #ff5993;
}
.centered {
text-align:center;
}
.topbtn {
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
.categorybtn {
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#contactus {
background-color: #dddddd;
font-size: 25px;
}
<h1 color="#0e0a0e">
<center>BALALAR</center>
</h1>
<div class="centered">
<label class="topbtn" for="cb-contact">Contact us</label>
<label class="topbtn">Random</label>
<label class="topbtn" for="cb-category">Category</label>
</div>
<hr color="black" style="height: 3px; width: 1100px" />
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<!--set to checked so next div is hidden by default -->
<input type="checkbox" id="cb-category" class="toggler" checked />
<div id="category" data-type='category' class="centered">
<button class="categorybtn">Actors</button>
<button class="categorybtn">Singers</button>
<button class="categorybtn">Instagram user</button>
<button class="categorybtn">Model</button>
<button class="categorybtn">Others</button>
<button class="categorybtn">XXX</button>
</div>
<!--contact us----------------------------------------------->
<!--set to checked so next div is hidden by default -->
<input type="checkbox" id="cb-contact" class="toggler" checked />
<div id="contactus" data-type='contact' class="centered">
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
</div>
You should also note the center tag is obsolete and should no longer be used. Use CSS instead. And as everyone else has mentioned, id must be unique on the page, use classes instead.
1) Don't use the same id to define elements, it must be unique in a document..
2) You can send the id: onclick="funcategory(this.id)" to differentiate which one you want to manipulate.
3) Example of reusable function:
var funcategory= function(e) {
var a = document.getElementById(e+'content');
if (a.style.display != "block") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
4) You forgot to close center tag. Which are obsolete by now, alternatively you could use CSS text-align: center;
body {
background-color: #ff5993;
}
.topbtn {
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
.categorybtn {
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#categorycontent {
display: none;
}
#contactcontent {
background-color: #dddddd;
font-size: 25px;
display: none;
}
<script>
var funcategory= function(e) {
var a = document.getElementById(e+'content');
if (a.style.display != "block") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
</script>
<h1 color="#0e0a0e">
<center>BALALAR</center>
</h1>
<center>
<button id="contact" class="topbtn" onclick="funcategory(this.id)">Contact us</button>
<button id="random" class="topbtn">Random</button>
<button id="category" onclick="funcategory(this.id)" class="topbtn">Category</button>
<button id="all" class="topbtn">All</button>
<button id="mine" class="topbtn">Mine</button>
<button id="top" class="topbtn">Top</button>
<button id="login" class="topbtn">Log in</button>
<!-- do not ^^^ use same id -->
</center>
<hr color="black" style="height: 3px; width: 1100px" />
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="categorycontent">
<center>
<button id="actor" class="categorybtn">Actors</button>
<button id="singer" class="categorybtn">Singers</button>
<button id="iguser" class="categorybtn">Instagram user</button>
<button id="label" class="categorybtn">Model</button>
<button id="other" class="categorybtn">Others</button>
<button id="xxx" class="categorybtn">XXX</button>
<!-- do not ^^^ use same id -->
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactcontent">
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
</center>
<!-- << notice missing / >
</div>
In the snippet below you will see that I am styling a radio button to look like a button. I am wanting these buttons to work just as the radio button would in its normal state. Right now both radio buttons are taking on the active class from my javascript on page load. This should only happen if they are selected.
Also, the fadeToggle from the if-statement that produces the extra input under the radio buttons is functioning as if the radio buttons are checkboxes. I have to click on the same button twice to de-activate it. I think this is based on the issue above.
Does anyone have any ideas what I am doing wrong?
var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
$('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
var radioCheck = $('.radio', this).val();
$('.radioTransform', this).toggleClass('active');
console.log(radioCheck);
if (radioCheck == 'Yes') {
$('#ansYes').fadeToggle(400);
}
});
.radio {
display: none;
}
#pushR {
margin-right: 25px;
}
.radioTransform {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
}
.radioTransform.active {
background: red;
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
#ansYes {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
<div class="formField">
<div class="radioTransform" id="pushR">
<span class="radioAnswer">YES</span>
<input type="radio" value="Yes" class="radio">
</div>
<div class="radioTransform">
<span class="radioAnswer">NO</span>
<input type="radio" value="No" class="radio">
</div>
</div>
<div class="formField" id="ansYes">
<label class="label">How are you doing?</label>
<input type="text" class="input">
</div>
<input type="submit" value="Submit RSVP" id="submit">
</form>
You don't need Javascript at all for this - only some intelligent CSS and a slight restructuring of your markup. This change will even increase the semantic value and accessibility of your solution.
I have only added Javascript for some console.logging so you see the snippet works.
Please note that in order to make radio buttons work like expected, they need to share the name attribute, otherwise both can be "on".
const radios = Array.from(document.querySelectorAll('[name="yesno"]'))
for (const radio of radios) {
radio.addEventListener('change', function() {
value.textContent = document.querySelector('[name="yesno"]:checked').value
})
}
.radio {
display: none;
}
.radioAnswer {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
transition-duration: .4s;
position: relative;
}
.radioAnswer::before {
display: inline-block;
content: "";
border-width: 0 2px 2px 0;
border-color: transparent;
border-style: solid;
width: 0;
height: 0;
transition: width .4s linear .1s,
height .2s linear 1.6s;
position: absolute;
left: 10px;
top: 50%;
transform: rotate(35deg) translateY(-50%);
transform-origin: center right;
}
input[type=radio]:checked+.radioAnswer {
background: #0a0;
color: #fff;
}
input[type=radio]:checked+.radioAnswer::before {
border-color: #fff;
transform: rotate(35deg) translateY(-50%);
height: 1.5em;
width: .8em;
transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s
; position: absolute;
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
<input type="radio" value="Yes" class="radio" name="yesno" id="yes">
<label class="radioAnswer" for="yes">Yes</label>
<input type="radio" value="No" class="radio" name="yesno" id="no">
<label class="radioAnswer" for="no">NO</label>
<p>Selected Value: <strong id="value"></strong></p>
Your if condition block only works when you clicked yes button. Then what if you clicked No, for this condition you can have else statement. And here in this code radioTransform div don't have active class on load.
var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
$('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
var radioCheck = $('.radio', this).val();
console.log(radioCheck);
$(this).toggleClass('active');
if (radioCheck == 'Yes') {
$('#ansYes').fadeToggle(400);
if($(this).next('.radioTransform').hasClass('active')){
$(this).next('.radioTransform').removeClass('active');
}
} else {
$('#ansYes').fadeOut(400);
if($(this).prev('.radioTransform').hasClass('active')){
$(this).prev('.radioTransform').removeClass('active');
}
}
});
.radio {
display: none;
}
#pushR {
margin-right: 25px;
}
.radioTransform {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
}
.radioTransform.active {
background: red;
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
#ansYes {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
<div class="formField">
<div class="radioTransform" id="pushR">
<span class="radioAnswer">YES</span>
<input type="radio" value="Yes" class="radio">
</div>
<div class="radioTransform">
<span class="radioAnswer">NO</span>
<input type="radio" value="No" class="radio">
</div>
</div>
<div class="formField" id="ansYes">
<label class="label">How are you doing?</label>
<input type="text" class="input">
</div>
<input type="submit" value="Submit RSVP" id="submit">
</form>
In order to achieve the toggling effect of the radio button with the backgrounds, $('.radioTransform', this).toggleClass('active'); will not be enough.
First, taking into consideration it is already inside a click handler which is attached to $('.radioTransform'), when you add this as second argument of $('.radioTransform', this).toggleClass('active'); you are telling it to look for .radioTransforms inside a .radioTransform, cause you are setting .radioTransform as the context of the selector, that's why it does not change color. And even if you remove this, you would be toggling the class for every .radioTransform there is (how many times did I write radioTransform?:) )
Second, remove background: red from .radioTransform when it is not active, else you will never see it happen
var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
$('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
var radioCheck = $('.radio', this).val();
$(this).toggleClass('active');
$(this).siblings('.radioTransform').toggleClass('active', !$(this).hasClass('active'));
console.log(radioCheck);
if (radioCheck == 'Yes') {
$('#ansYes').fadeToggle(400);
} else {
$('#ansYes').fadeOut(400);
}
});
.radio {
display: none;
}
#pushR {
margin-right: 25px;
}
.radioTransform {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
}
.radioTransform {
/*background: red;*/
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
#ansYes {
display: none;
}
.radioTransform.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
<div class="formField">
<div class="radioTransform" id="pushR">
<span class="radioAnswer">YES</span>
<input type="radio" value="Yes" class="radio">
</div>
<div class="radioTransform">
<span class="radioAnswer">NO</span>
<input type="radio" value="No" class="radio">
</div>
</div>
<div class="formField" id="ansYes">
<label class="label">How are you doing?</label>
<input type="text" class="input">
</div>
<input type="submit" value="Submit RSVP" id="submit">
</form>
I'm fairly new to javascript so I thought about creating a simple checklist with buttons that work as checkboxes. I set up HTML for buttons and made the script with a function for the checking them. Below is my code.
var checkbox1 = $("#checkbox1");
checkbox1.on("click", function() {
checkbox1.toggleClass("checked");
if (checkbox1.hasClass("checked")) {
checkbox1.html('<i class="material-icons">check</i>');
} else {
checkbox1.text("");
}
});
var checkbox2 = $("#checkbox2");
checkbox2.on("click", function() {
checkbox2.toggleClass("checked");
if (checkbox2.hasClass("checked")) {
checkbox2.html('<i class="material-icons">check</i>');
} else {
checkbox2.text("");
}
});
var checkbox3 = $("#checkbox3");
checkbox3.on("click", function() {
checkbox3.toggleClass("checked");
if (checkbox3.hasClass("checked")) {
checkbox3.html('<i class="material-icons">check</i>');
} else {
checkbox3.text("");
}
});
*{
margin: 0;
/*color: #fff;*/
}
body {
background-color: #0f0f0f;
}
p {
line-height: 30px;
padding-left: 15px;
}
.task {
background-color: #cbcbcb;
display: flex;
border-radius: 30px;
margin: 15px;
}
.box {
width: 30px;
height: 30px;
}
.checkbox {
border-radius: 50%;
padding: 0;
width: 30px;
height: 30px;
border: none;
}
.checkbox.checked {
background-color: #0d88ce;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="task">
<div class="box">
<button id="checkbox1" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="box">
<button id="checkbox2" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="box">
<button id="checkbox3" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
Is there a way to merge all these functions for each element where the only id of it changes?
I think you're looking for a class selector. What you'd end up with is something like this:
var checkboxes = $(".checkbox");
checkboxes.on("click", function() {
$(this).toggleClass("checked");
if ($(this).hasClass("checked")) {
$(this).html('<i class="material-icons">check</i>');
} else {
$(this).text("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="checkbox1" class="checkbox" type="button" name="button"></button>
<button id="checkbox2" class="checkbox" type="button" name="button"></button>
<button id="checkbox3" class="checkbox" type="button" name="button"></button>
Sure.
Gather all the checkboxes up into a collection. You've already given all of them the checkbox class, so that's the simplest way.
Loop over the collection and give each checkbox a reference to a
common event callback function.
That function will run in the context of the checkbox that was
clicked, so the this keyword will reference that checkbox making
the id irrelevant.
By passing this to the JQuery object you can use the JQuery API.
// Find all the checkboxes by their class and loop over them:
$(".checkbox").each(function(idx, box){
// Set up an event handler for each one
$(box).on("click", function(evt) {
// In the callback, this will reference the checkbox that was clicked
// but we'll wrap it in the JQuery object so we can use it with JQuery
var $this = $(this);
$this.toggleClass("checked");
if ($this.hasClass("checked")) {
$this.html('<i class="material-icons">check</i>');
} else {
$this.text("");
}
});
});
*{
margin: 0;
/*color: #fff;*/
}
body {
background-color: #0f0f0f;
}
p {
line-height: 30px;
padding-left: 15px;
}
.task {
background-color: #cbcbcb;
display: flex;
border-radius: 30px;
margin: 15px;
}
.box {
width: 30px;
height: 30px;
}
.checkbox {
border-radius: 50%;
padding: 0;
width: 30px;
height: 30px;
border: none;
}
.checkbox.checked {
background-color: #0d88ce;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homework</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<div class="task">
<div class="box">
<button id="checkbox1" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="box">
<button id="checkbox2" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="box">
<button id="checkbox3" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
</body>
<script type='text/javascript' src='script.js'></script>
</html>
You could also achieve the same behavior without using JavaScript, just use a hidden checkbox and use the :checked pseudo-class selector together with the for attribute from the <label> element.
* {
margin: 0;
}
body {
background-color: #0f0f0f;
}
p {
line-height: 30px;
padding-left: 15px;
}
.task {
background-color: #cbcbcb;
display: flex;
border-radius: 30px;
margin: 15px;
}
.custom-checkbox {
display: block;
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
color: white;
}
.custom-checkbox .input {
display: none;
}
.custom-checkbox .label {
background-color: #ddd;
display: block;
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.custom-checkbox .icon {
display: none;
pointer-events: none;
position: absolute;
z-index: 2;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.custom-checkbox .input:checked ~ .label {
background-color: #0d88ce;
}
.custom-checkbox .input:checked ~ .icon {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homework</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="task">
<div class="custom-checkbox">
<input id="checkbox1" class="input" type="checkbox" />
<label for="checkbox1" class="label"></label>
<i class="icon material-icons">check</i>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="custom-checkbox">
<input id="checkbox2" class="input" type="checkbox" />
<label for="checkbox2" class="label"></label>
<i class="icon material-icons">check</i>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="custom-checkbox">
<input id="checkbox3" class="input" type="checkbox" />
<label for="checkbox3" class="label"></label>
<i class="icon material-icons">check</i>
</div>
<p> Some text</p>
</div>
</body>
</html>
I am creating a custom form but have hit a snag: The Radio buttons; when you click on them in the unchecked status the do not check. They will check if click the associated Div and the will also uncheck when checked. I have tried to extend the JS to the Label and It still does not work. And so...
How do I get a custom radio button to check and/or what do i need to do to get this to function?
Here is the relevant Code:
function check(checkbox) {
if (document.getElementById(checkbox).checked == false) {
document.getElementById(checkbox).checked = true;
} else {
document.getElementById(checkbox).checked = false;
}
}
.title {
display: inline;
position: relative;
top: 2px;
font-family: "Arial";
color: #fff;
font-size: 18px;
padding: 0px;
margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-collapse: collapse;
font-stretch: ultra-condensed;
}
input[type="radio"] {
display: none;
}
[type="radio"] + label {
width: 10px;
height: 10px;
}
[type="radio"] + label {
background-color: #A3D5FF;
border: 1px solid #A3D5FF;
padding: 9px;
border-radius: 20px;
display: inline-block;
position: relative;
margin-right: 30px;
}
[type="radio"]:checked + label {
background-color: #0088A8;
;
border: 3px solid #fff;
height: 5.75px;
width: 5.75px;
color: #243441;
}
input[type="radio"] + label {
cursor: pointer;
font-size: 1em;
float: right;
position: relative;
right: -27px;
}
.chk {
background: #009FC2;
width: 265px;
height: 30px;
margin: 5px;
padding: 5px;
border-radius: 5px;
}
.chk:hover {
background: #0088A8;
}
HTML
<div class="chk" onClick="check('f-unlimited')">
<h3 class="title">
Unlimited
</h3>
<input id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
<label for="f-unlimited"></label>
</div>
<div class="chk" onClick="check('f-expandedFormat')">
<h3 class="title">
Expanded Format
</h3>
<input id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
<label for="f-expandedFormat"></label>
</div>
<div class="chk" onClick="check('f-standardLegal')">
<h3 class="title">
Standard Legal
</h3>
<input id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
<label for="f-standardLegal"></label>
</div>
</div>
Additional note: I am running almost identical code for my checkboxes and they are working perfectly.
The problem is in your check function. When you click on the div it fires to reverse the check state. When you click the check itself, the check state is reversed, then the check function runs and reverses the state again. You need to cancel event propagation when the check itself is clicked.
noted, previous answer was in jquery, please see below for vanilla
javascript :
function checkboxClicked() {
event.stopPropagation();
event.preventDefault();
}
function check(checkbox) {
if (document.getElementById(checkbox).checked == false) {
document.getElementById(checkbox).checked = true;
} else {
document.getElementById(checkbox).checked = false;
}
}
html :
<div class="chk" onClick="check('f-unlimited')">
<h3 class="title">
Unlimited
</h3>
<input onclick="checkboxClicked()" id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
<label for="f-unlimited"></label>
</div>
<div class="chk" onClick="check('f-expandedFormat')">
<h3 class="title">
Expanded Format
</h3>
<input onclick="checkboxClicked()" id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
<label for="f-expandedFormat"></label>
</div>
<div class="chk" onClick="check('f-standardLegal')">
<h3 class="title">
Standard Legal
</h3>
<input onclick="checkboxClicked()" id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
<label for="f-standardLegal"></label>
</div>