Select Box Appears/Disappears on Button Click

Select Box Appears/Disappears on Button Click - javascript

Searched around and couldn't find what I was looking for. I have 2 buttons that pull up a two different select boxes on a click and they will disappear with a second click. However, I want select box 1 to disappear on Button click 2 and vice versa: select box 2 will disappear on Button click 1.
HTML:
window.onload = function()
{
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
function button2function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
<button type="button" value='hide/show' onclick="button1function('name1')">Button 1</button>
<button type="button" value='hide/show' onclick="button2function('name2')">Button 2</button>
<select id="name1">
<option value="">What would you like to know..</option>
</select>
<select id="name2">
<option value="">What would you like to know 2..</option>
</select>

Like this? https://jsfiddle.net/o3btLkpd/
try calling this at the top of the event handler for button 1:
document.getElementById('name2').style.display = 'none';
and this in the handler for button 2:
document.getElementById('name1').style.display = 'none';
the full resulting code would be like this:
window.onload = function() {
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id) {
document.getElementById('name2').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
function button2function(id) {
document.getElementById('name1').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}

Related

Change javascript show/hidden text function

It works... but i want to change the default to hidden.
Click first time to show the hidden text
<script>
function displayRow(itemID){
if ((document.getElementById(itemID).style.display == 'block')) {
document.getElementById(itemID).style.display = 'display';
} else {
document.getElementById(itemID).style.display = 'display';
}
}
</script>
<button onclick="displayRow('1')">Show/Hidden text</button>

Simply set your display to hidden by default
<button style='display: hidden;' onclick="displayRow('<? echo $element ?>')" class='no-print'>Show/Hidden text</button>
and the js
function displayRow(itemID){
var el = document.getElementById(itemID);
if ((el.style.display == 'hidden')) {
el.style.display = 'block';
} else {
el.style.display = 'hidden';
}
}

function displayRow(itemID){
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = 'block';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
<table>
<tr style="display:none" id="1">
<td>Test</td>
</tr>
</table>
<button onclick="displayRow('1')">Show/Hidden text</button>
Use "none" instead "hidden", and put style="display: none" to the element which want to hide by default

function displayRow(itemID){
if (document.getElementById(itemID).style.display == 'block') {
document.getElementById(itemID).style.display = 'none';
} else {
document.getElementById(itemID).style.display = 'block';
}
}

Javascript onchange doesn't show hidden div

I have a drop down list and I want every time someone clicks on one of the list, it shows a hidden div, I've written this code but for some reason it doesn't work:
<?php
echo '<select name="ipqos" onchange="myFunction()">';
if ($enable_iprule[0]=='yes'){
echo '<option value="enable_iprule" selected>Enable IP Rule';
}
else{
echo '<option value="enable_iprule">Enable IP Rule';
}
if ($enable_qoshunter[8]=='yes'){
echo '<option value="enable_qoshunter" selected>Enable QoS Hunter';
}
else{
echo '<option value="enable_qoshunter">Enable QoS Hunter';
}
if ($enable_iprule[8]=='no' && $enable_qoshunter[0]=='no'){
echo '<option value="disable_all" selected>Disable All';
}
else{
echo '<option value="disable_all">Disable All';
}
echo '</select>';
echo "
<div id=\"ip\" style=\"display:none\">
<br><br>IP Rule :
<br><textarea name=\"ip_rule\" rows=\"2\"/>$ip_list[1]</textarea>
</div>
<div id=\"qos\" style=\"display:none\">
<br><br>QoS Target :
<br><textarea name=\"qos_target\" rows=\"2\"/>$qos_list[1]</textarea>
<script>
function myFunction() {
var menu = document.getElementById('ipqos');
if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
</script>";
?>
I don't get any error messages on my script but for some reason every time I click on a menu, the corresponding hidden div doesn't show up
Where did I go wrong?
UPDATE: This is the View Source from Google Chrome
<select name="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>
<script>
function myFunction() {
var menu = document.getElementById('ipqos');
if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
</script>

This line:
var menu = document.getElementById('ipqos');
There is no element with ID ipqos. There is an element with that name, but not an ID. Change it to:
<select name="ipqos" id="ipqos" onchange="myFunction()">
Second, you're comparing the text of the selected option. Looking at your options, you want to be checking the value instead:
menu.options[menu.selectedIndex].value == 'enable_iprule'
Working example:
function myFunction() {
var menu = document.getElementById('ipqos');
var val = menu.options[menu.selectedIndex].value;
if (val == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (val == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
<select name="ipqos" id="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>

RGraham solutions works perfectly.
I did a small work arround on your script.
Here is a simple jsFiddle : http://jsfiddle.net/5ypkaxup/
For the Javascript, I did simplify the process a little bit.
function changedSelect() {
var selectedOption = document.getElementById("ip_select").value;
document.getElementById("demo").innerHTML = "You selected: " + selectedOption;
if(selectedOption == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (selectedOption == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
As he told, you need to give an ID to your select element to make it works.
<select id="ip_select" name="ipqos" onchange="changedSelect();">

How to change button text on click using JavaScript?

Only started JS a couple of days ago, and I'm already having some troubles getting a toggle to work. I want the button to toggle between on and off when clicked.
function click() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on"); {
change.innerHTML = "off";
} else {
change.innerHTML = "on";
}
}
<button type="button" id="toggle" onClick="click()">on</button>
Is this how I should go about it?

try this
<!DOCTYPE html>
<html>
<body>
<button id="toggle" onclick="myFunction()">on</button>
<script>
function myFunction() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on")
{
change.innerHTML = "off";
}
else {
change.innerHTML = "on";
}
}
</script>
</body>
</html>
define your function to be unique as always
and not make use of the javascript function/reserve words
just a recommendation/suggestion

Your having mistake in the if statement,there is no semicolon after if statement
write the code as like below
<button name="toggle" id="toggle" onclick="myFunction()">on</button>
<script>
function myFunction() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on")
{
change.innerHTML = "off";
}
else {
change.innerHTML = "on";
}
}
</script>

You can do this:
<button type = "button" id= "toggle" onClick = "click()">on</button>
function click()
{
var change = document.getElementById("toggle");
if (change.value == "on")
{
change.value = "off";
}
else
{
change.value = "on";
}
}
or by doing this:
function click()
{
if (this.value=="on")
{
this.value = "off";
}
else
{
this.value = "on";
}
}

It will work for you
function myFunction()
{
var change = document.getElementById("toggle");
if (change.value=="off") change.value = "on";
else change.value = "off";
}
for button
<input type="button" value="on" id="toggle" onclick="myFunction()">

Percentage bar goes up as button is pressed

the code so far
Now if you press a button, no matter which one, a div and a percentage will be shown. I've got that going for me, but if one div is toggled, and another one is pressed, the 66% div should be toggled and so on if two divs are shown and the third is toggled the 100% div should show up.
Basicly if you click a button, a div and a percentage div is revealed if you click aonther the percentage bar goes up. How do I do this? if two divs are toggled and if you press the button two diffrent divs are shown?
JS
function showhide()
{
var div = document.getElementById("lol");
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
if (div.style.display !== "none")
{
div.style.display = "none";
id3.style.display = "none";
}
else {
div.style.display = "block";
}
}
function showhide2()
{
var div2 = document.getElementById("lol2");
if (div2.style.display !== "none") {
div2.style.display = "none";
}
else {
div2.style.display = "block";
}
}
function showhide3()
{
var div3 = document.getElementById("lol3");
if (div3.style.display !== "none") {
div3.style.display = "none";
}
else {
div3.style.display = "block";
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div id="lol"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "5"><p>100%</p></div>
<!-- End your code here -->
</body>
</html>

Not entirely sure what you mean but I think it might be something like this?
http://liveweave.com/PcZ7vL
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div id="lol1"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "7"><p>100%</p></div>
</body>
</html>
JavaScript:
var one = 0
var two = 0
var three = 0
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
var id7 = document.getElementById("7");
var div1 = document.getElementById("lol1");
var div2 = document.getElementById("lol2");
var div3 = document.getElementById("lol3");
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "none";
function showhide()
{
if (div1.style.display !== "none")
{
div1.style.display = "none";
one = 0
}
else {
div1.style.display = "block";
one = 1
}
showper();
}
function showhide2()
{
if (div2.style.display !== "none") {
div2.style.display = "none";
two = 0
}
else {
div2.style.display = "block";
two = 1
}
showper()
}
function showhide3()
{
if (div3.style.display !== "none") {
div3.style.display = "none";
three = 0
}
else {
div3.style.display = "block";
three = 1
}
showper()
}
function showper()
{
var sum = one + two + three
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
if (sum == 1) {
id3.style.display = "block";
} else if (sum == 2) {
id5.style.display = "block";
} else if (sum == 3) {
id7.style.display = "block";
}
else {
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
}
}
EDIT:
A slightly neater way to do it would be this: http://liveweave.com/YAHn55.
Also, you should take a look at jQuery, makes things like this much simpler.
EDIT:
see example

Binding Toggle Button onClick to div

From previous threads I've used the following code.
Current code is available for review at http://jsfiddle.net/sLHKq/
<div id="question1">
<ol>
<li id="correct1">A1</li>
<li id="">A2</li>
</ol>
<div id="answer1" style="display:none;"></div>
<button onclick="toggle('answer1');">Button 1</button>
</div>
<hr>
<div id="question2">
<ol>
<li id="">B1</li>
<li id="correct2">B2</li>
</ol>
<div id="answer2" style="display:none;"></div>
</div>
<button onclick="toggle('answer2');">Button 2</button>
The Javascript I used is as follows for OnClick correct1 and correct2 id's in both divs are changing background color.I tried this code to achieve it for Only the respective Button's toggle to work.
function toggle(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById("correct1").style.backgroundColor = '#BCF5A9';
document.getElementById("correct2").style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById("correct1").style.backgroundColor = '#FFFFFF';
document.getElementById("correct2").style.backgroundColor = '#FFFFFF';
}
}
How can restrict the onclick and background color change to just the question's button div ?

do you mean like:
function toggle(id) {
var e = document.getElementById("answer" + id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById("correct" + id).style.backgroundColor = '#BCF5A9';
document.getElementById("correct" + id).style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById("correct" + id).style.backgroundColor = '#FFFFFF';
document.getElementById("correct" + id).style.backgroundColor = '#FFFFFF';
}
}
See updated Fiddle

I would suggest to pass correct answer id also in the function like this:
function toggle(id, ans) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById(ans).style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById(ans).style.backgroundColor = '#FFFFFF';
}
}
check fiddle: http://jsfiddle.net/sLHKq/2/

Develop Reference

JavaScript is the programming language of the Web.

Select Box Appears/Disappears on Button Click - javascript

Related

Change javascript show/hidden text function

Javascript onchange doesn't show hidden div

How to change button text on click using JavaScript?

Percentage bar goes up as button is pressed

Binding Toggle Button onClick to div

Categories

Resources