We Keep Coding

Hiding and showing html elements with radio button and javascript style=none

I am trying to write a function that will show or hide an html element (contained in a div) using javascript. Right now I have 3 radio buttons (to eventually show/hide 3 elements depending on radio button selected, but right now I am just trying to hide one element (month) if year or week is selected, and to show it if month is selected. My html is:
<div id="setting">
<input type="radio" id="year" name="view" value="year"> year<br>
<input type="radio" id="month" name="view" value="month"> month<br>
<input type="radio" id="week" name="view" value="week"> week
</div>
<div id="cal">
(element here I am trying to show/hide)
</div>
My javascript is:
function defineSetting (){
var setting = document.getElementById('setting').checked;
if(setting =='year'){
document.getElementById("cal").style.display = "none";
}else if(setting =='month'){
document.getElementById("cal").style.display = "unset";
}else if(setting =='week'){
document.getElementById("cal").style.display = "none";
}
}
I am also not super experienced with javascript and am trying to figure out how to call the function (if it works). If it is in the document ready function will it run when the page is loaded or do i need to call it somewhere.

I think this is what you're going for. You want to add an event listener to the buttons, and pass the value of the input that's checked to the defineSetting() function that hides/shows your #cal element. I also simplified your test in defineSetting()
<div id="setting">
<input type="radio" id="year" name="view" value="year" class="setting"> year<br>
<input type="radio" id="month" name="view" value="month" class="setting"> month<br>
<input type="radio" id="week" name="view" value="week" class="setting"> week
</div>
<div id="cal">
(element here I am trying to show/hide)
</div>
<style>
.hidden { display: none; }
</style>
<script>
var inputs = document.getElementsByClassName('setting'),
setting;
for (var i = 0; i < inputs.length; i++) {
var el = inputs[i];
el.addEventListener('change', function() {
defineSetting(this.value);
})
}
function defineSetting(setting) {
if (setting == 'year' || setting == 'week') {
document.getElementById("cal").classList.add('hidden');
} else {
document.getElementById("cal").classList.remove('hidden');
}
}
</script>

This will help you out:
How to get value of selected radio button?
You are trying to get the checked value of a div element, but this element doesn't have that. The input element do have that property so that's where you can get it from.

.checked not identifying if a radio button is checked

I have some radio buttons on a page, and I need to just identify which one was checked in my JS, based on ID. I'm not sure why this isn't working. Each time, I get the "nothing checked" message in my console. Thanks!
HTML:
<input type="radio" id="aud1">elephant</input>
<input type="radio" id="aud2">prairie dog</input>
<input type="radio" id="aud3">tiger</input>
JS:
var aud;
if (document.getElementById('aud1').checked) {
var aud = document.getElementById('file1');
}else if(document.getElementById('aud2').checked) {
var aud = document.getElementById('file2');
}else if (document.getElementById('aud3').checked){
var aud = document.getElementById('file3');
}
else console.log('nothing checked');

See below. I've added a button to your code that you can click after you have some checked.
Initially, when the page loads, there is nothing clicked. Your JS is ran as soon as the page is built there which is why you were seeing the nothing clicked.
document.getElementById('check-radios').onclick = function() {
var aud;
if (document.getElementById('aud1').checked) {
var aud = document.getElementById('file1');
console.log('aud1 checked');
}
else if (document.getElementById('aud2').checked) {
var aud = document.getElementById('file2');
console.log('aud2 checked');
}
else if (document.getElementById('aud3').checked) {
var aud = document.getElementById('file3');
console.log('aud3 checked');
}
else console.log('nothing checked');
}
<input type="radio" id="aud1">elephant</input>
<input type="radio" id="aud2">prairie dog</input>
<input type="radio" id="aud3">tiger</input>
<button id="check-radios">Check for clicked</button>

do you explicitly need this code? why not use a single class, and have the filename/desc as a custom attribute like so:
<input type="radio" name="animals" class="order" data-animal="elephant" />elephant
<input type="radio" name="animals" class="order" data-animal="zebra" />zebra
<input type="radio" name="animals" class="order" data-animal="lion" />lion
<script>
$(".order").click(function () {
var choice = this.getAttribute("data-animal");
alert(choice);
/* console.log(choice); */
})
</script>
That way you dont have to manually keep adding more code, u can just add the html at the top using the same class and a different attribute value... much easier to maintain -
Also since you had an elseif i added a name to group them as individual radios as I presume you intended?
<input type="radio" name="animals" class="order" checked data-animal="zebra">zebra
bear in mind there is no closing tag for input tags - just /> at the end instead of >

Javascript how to change radio button label text?

I want to change the text of the label which is associated with the radiobutton id="male". I have tried various ways to do it, but i can't make it work. I want to change the text "Male" in the label associated to the radio button.
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
</input>
<input type="button" value="Submit" onclick = test()>
<script>
function test()
{
var r = document.getElementById("male");
r.nextSibling.data = "adaS";
// r.nextSibling.nodeValue = "adaS"; // have tried all these ways
// r.childNodes[0].value= "adaS";
// r.childNodes[0].innerHTML= "adaS";
// r.parentNode.childNodes[1].innerHTML= "adaS";
}
</script>
please suggest some working way to change the text "Male" in the label.

You can use
var r = document.getElementsByTagName("label")
to select all the label element in your page and then use
r[0].innerHTML ="new text"
to select first label and set the text to "next text" in your test() function

I tried to use ideas from the above to get a working example, and had some problems. So I asked for help in another posting and #KrishCdbry very kindly fixed the problem. The posted question is at javascript - How to dynamically change information displayed by radio button? Below is the working example with Krish's changes
<html>
<form name="myform" onsubmit="OnSubmitForm();">
<input type="radio" id = 'first' name="operation" value="1"
checked> <label for="alsoFirst"> Answer 1 </label>
<input type="radio" id = 'second' name="operation" value="2">
<label for="alsoSecond">Answer 2</label>
<p>
<input type="submit" name="submit" value="save">
</p>
</form>
<script type="text/javascript">
document.addEventListener('readystatechange', function() {
// Seems like a GOOD PRACTICE - keeps me from getting type error I was getting
// https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object
if (document.readyState === "complete") {
init();
}
});
function init() {
console.log ("expect to change -Answer 1- displayed by first button to word junk");
// this works
var label = document.getElementsByTagName('label') [0];
// this does not work
label.innerHTML = 'junk';
}
//http://www.javascript-coder.com/html-form/html-form-action.phtml
function OnSubmitForm()
{
if(document.getElementById('first').checked == true)
{
alert ( "You have selected the first answer" );
}
else
if(document.getElementById('second').checked == true)
{
alert ( "You have selected the SECOND answer" );
}
return false;
}
/*
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
</input>
var input = document.getElementById('male');
var label = input.getElementsByTagName('label')[0];
label.innerHTML = 'New Text';
*/
//https://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
</script>
</html>

With jQuery, $('label[for=male]').html('New Label');
Plain JS:
var input = document.getElementById('male');
var label = input.getElementsByTagName('label')[0];
label.innerHTML = 'New Text';
Can also chain that together:
var label = document.getElementById('male').getElementsByTagName('label')[0];
label.innerHTML = 'New Text;

Javascript radio display none/inline

In my HTML code I have this two inputs:
Yes <input type="radio" onclick="RadioCheck()" name="radio" id="yes" />
No <input type="radio" onclick="RadioCheck()" name="radio" id="no" />
Now I have a div that is by default as it's style display inline, and I want that when I click no it makes it style display none and yes will make it inline, so I made this function
function RadioCheck() {
var Radioclick = document.getElementById("hiddendiv").style.display;
if (Radioclick == "inline") {
document.getElementById("hiddendiv").style.display = "none";
}
if (Radioclick == "none") {
document.getElementById("hiddendiv").style.display = "inline";
}
}
Now the problem is that I don't know how to do it that when I click yes it will switch to inline and if I click yes again it will stay inline instead of switching it to none, I know my code just switch between inline to none but I want it to make it inline when yes radio is clicked and none when no radio is clicked without two functions.

Perhaps you could pass a variable to the RadioCheck() function?
Yes <input type="radio" onclick="RadioCheck(true)" name="radio" id="yes" />
No <input type="radio" onclick="RadioCheck(false)" name="radio" id="no" />
And then in your javascript:
function RadioCheck(isYes){
if(isYes){
document.getElementById("hiddendiv").style.display = "inline";
}else{
document.getElementById("hiddendiv").style.display = "none";
}
}

If you want the div's display to be determined by the radio button checked, the condition should be on the radio checked:
if the Yes radio button is checked
show the div
if the No radio button is checked
hide the div
So:
if (document.getElementById("yes").checked) {
document.getElementById("hiddendiv").style.display = "inline";
}
if (document.getElementById("no").checked) {
document.getElementById("hiddendiv").style.display = "none";
}
See http://jsfiddle.net/nivas/39cMn/ for an working example

If you add a value attribute to your radio buttons and pass the radio button id to the function RadioCheck you can use the button value to simplify the code. For example:
<form>
Yes <input type="radio" onclick="RadioCheck('yes')" name="radio" id="yes" value="inline" />
No <input type="radio" onclick="RadioCheck('no')" name="radio" id="no" value="none" />
</form>
<div id="hiddendiv" style="display:none">
this div can be hidden and revealed
</div>
<script>
function RadioCheck(id) {
var value = document.getElementById(id).value;
document.getElementById("hiddendiv").style.display = value;
}
</script>

Change an onclick value with javascript

I'm pretty new to JS and maybe this is a very banal questions but I still can't figure out what's wrong. I have this simple html code:
<span>1</span>
<input id="check1" type="radio" value="a1"/>
<span>2</span>
<input id="check2" type="radio" value="b2"/>
<span>3</span>
<input id="check3" type="radio" value="c3"/>
<span>4</span>
<input id="check4" type="radio" value="a4"/>
<span>5</span>
<input id="check5" type="radio" value="b5"/>
<input id="red" type="button" value="Go" onclick=""/>
What i would like to achieve is, based on the radio checked change the onclick property.
For example, if check1 and check2 are checked go to google.com, if check1 and check3 go to jsfiddle.net etcetera. So I wrote a simple Javascript:
window.onchange = function redirect(){
if (document.getElementById('check1').checked && document.getElementById('check2').checked) {
location.href='www.google.com';
// document.getElementById('red').onclick="www.google.com"
}
else if (document.getElementById('check1').checked && document.getElementById('check3').checked) {
location.href='www.jsfiddle.net';
// document.getElementById('red').onclick="window.open('www.jsfiddle.net')"
}
}
Here You can find a JS Fiddle.
What I thought to do was to set the onclick property like I did with an image, using getElementById and then setting his source, so I wrote document.getElementById('red').onclick="window.open('random page')" but for some reason that I can't understand it doesn't work.
Questions:
1) As you can see in my code i wrote a location.href='address' that obviously doen't wait for the user to click the button, so that's not a solution, how can I make this work?
2)Is there a way to make this piece of code more scalable? What I mean is, in the future if I want to add another radio, I would have to modify manually the code and insert another else if, I thought about something like:
var radio = document.getElementByName('radio') //not sure if this is the right getElement
for (var i=1; i<radio.lenght; i++){
if radio[i].checked{ //is this right?
for (var n=i+1; n<radio.lenght; n++){
if radio[n].checked{
document.getElementById('red').onclick="window.open('random page')"
}
}
}
Any suggestion to my code is welcome.
​

Try out this in JS Fiddle. It contains how you can listen the onclick event of a button and to get the checked value of a radio button.
HTML part:
<form action="">
<input type="radio" name="vehicle" value="Yes" id='yes'>Yes<br>
<input type="radio" name="vehicle" value="No" id='no'>No
</form>
<input id="red" type="button" value="let's go"/>
JS part:
document.getElementById('red').onclick = function() {
if (document.getElementById('yes').checked) {
alert('I have a Vehicle.');
} else if(document.getElementById('no').checked) {
alert('I don\'t have a Vehicle.');
} else {
alert('No answer.');
}
}
If you use radio buttons, and you want only one to be selectable to the user at a time you have to set the same name attribute to them.
You can also make use of the value property of radio buttons for storing the redirection URL.
Here is a more useful example for you.
HTML part:
<form action="">
<input type="radio" name='redirect' value='https://www.google.com/' id='google'>Google<br />
<input type="radio" name='redirect' value='http://www.jsfiddle.net/' id='jsFiddle'>JS Fiddle<br />
<input type="radio" name='redirect' value='https://www.facebook.com/' id='Facebook'>Facebook
</form>
<input id="red" type="button" value="let's go"/>
JS part:
document.getElementById('red').onclick = function() {
var options = document.getElementsByName('redirect'),
length = options.length,
i = 0;
for (i; i < length; i++) {
if (options[i].checked) {
window.open(options[i].value);
}
}
}

if (document.getElementById('check1').checked&&document.getElementById('check2').checked)
{
document.getElementById('red').onclick=function(){
window.location.href ='http://www.google.com';
};
}
This code binds the function to the onclick event of element with id='red'. So add a bunch of such conditions and change the onclick binding whenever any radio button is checked/unchecked.