I want to compress all this code into a single block instead of 5. It works perfect, but it is very bloated. Any other tips for improving this code would be greatly appreciated.
JS:
function vanish1() {
var el = document.getElementById('priceCheck1');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function vanish2() {
var el = document.getElementById('priceCheck2');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function vanish3() {
var el = document.getElementById('priceCheck3');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
HTML:
<div id="priceCheck1">
test1
</div>
<div id="priceCheck2">
test2
</div>
<div id="priceCheck3">
test3
</div>
You could do this:
function vanish(elementName) {
var el = document.getElementById(elementName);
if (el.style.display == "block") el.style.display = "none";
else el.style.display = "block";
}
Function call:
vanish('priceCheck1');
Hello you can add a class name for the HTML.
then you can get each HTML by classname..
Even smaller...
function vanish(style) {
style.display == "block" ? style.display = "none" : style.display = "block";
}
vanish(document.getElementById("priceCheck1").style);
or
function vanish(element) {
element.style.display == "block" ? element.style.display = "none" : element.style.display = "block";
}
vanish(document.getElementById("priceCheck1"));
Related
I'm not a programmer so I hope you will pardon me if I will write not correct things.
I have two fieldset with two different "id"
I tried to write a code in javascript that when I show the 1st the 2nd will be hided and viceversa.
I can't understand where I'm doing wrong.
Can you help me?
Here html
<label onclick="add()"></label>
<label onclick="modify()"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>
and here my javascript text
function add() {
var x = document.getElementById('add');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function modify() {
var y = document.getElementById('modify');
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
the problem is that not only I would like that when I do click on the first it open and with another click it will close but also that when 1 fieldset is shown, the other will be hided and viceversa.
Thank you
You can use below function
function hideShow(targetId) {
var targetNode = document.getElementById(targetId);
if(targetNode.style.display === 'block') {
return; // If click is on the node which is already shown, just return
}
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
} else {
y.style.display = 'block';
x.style.display = 'none';
}
}
And use same function for both,
<label onclick="hideShow('add')"></label>
<label onclick="hideShow('modify')"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>
You need to define x in your modify function. Or like #ibrahim said, just defined both variables outside the sope
function modify() {
var y = document.getElementById('modify');
var x = document.getElementById('add')
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
Simple fix, if you want to get working.
function add() {
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
} else {
x.style.display = 'none';
}
}
function modify() {
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
As you can see both has x and y var so that none of them is undefined. To move to clean code, you may wish to bring the var outside of the methods(reduce redundancy of the code)
var lastid;
function show_submenu(obj) {
var ele = document.getElementById(obj).style;
var elemLastId = document.getElementById(lastid);
if (elemLastId != null) {
elemLastId.style.display = "none";
}
lastid = obj;
if (ele.display == "none") {
ele.display = "block";
} else {
ele.display = "none";
}
}
function toggle_menu(id){
var menu = document.getElementById(id);
if(menu.style.display == 'none')
menu.style.display = 'block';
else
menu.style.display = 'none';
}
Can somebody teach me how to debug this code?
I want to reset the main level when I click the button of menu again.
I'm looking to make a button function to Show/hide div's with javascript and have the buttons switch between each other.
I can get them to show and hide but can't get the buttons to switch between each other without the other div showing.
<script type="text/javascript" language="javascript">
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
function showHide1() {
var ele = document.getElementById("showHideDiv1");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
<button onclick="return showHide();">box1</button>
<button onclick="return showHide1();">box2</button>
<div id="showHideDiv" style="display:none;">text1</div>
<div id="showHideDiv1" style="display:none;">text2</div>
If I got the question right, this might be of use
<script type="text/javascript" language="javascript">
function showHide() {
var ele = document.getElementById("showHideDiv");
var ele1 = document.getElementById("showHideDiv1");
ele1.style.display = "none";
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
function showHide1() {
var ele = document.getElementById("showHideDiv");
var ele1 = document.getElementById("showHideDiv1");
ele.style.display = "none";
if(ele1.style.display == "block") {
ele1.style.display = "none";
}
else {
ele1.style.display = "block";
}
}
</script>
<button onclick="return showHide();">box1</button>
<button onclick="return showHide1();">box2</button>
<div id="showHideDiv" style="display:none;">text1</div>
<div id="showHideDiv1" style="display:none;">text2</div>
In this i want a function that when the user click on "Button 01" it should make visible the DIVid "01". After this when click on some other button, it should it hide the previous DIVid and make visible the relevant DIVid.
I have created a fiddle.
function Visibility() {
var har_element = document.getElementById('C');
var meth_element = document.getElementById('D');
var main_element = document.getElementById('E');
var vis = har_element.style;
if(vis.display == 'block') {vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
} else {
vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
}
}
try this
window.onload = function(){
hideSomeDivs();
}
function showHide(showHidebuttonId)
{
hideAll();
if(showHidebuttonId == "1")
document.getElementById("first").style.display = 'block';
else if(showHidebuttonId == "2")
document.getElementById("second").style.display = 'block';
else if(showHidebuttonId == "3")
document.getElementById("third").style.display = 'block';
else if(showHidebuttonId == "4")
document.getElementById("fourth").style.display = 'block';
else if(showHidebuttonId == "5")
document.getElementById("fifth").style.display = 'block';
}
function hideAll(){
document.getElementById("first").style.display = 'none';
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
document.getElementById("fourth").style.display = 'none';
document.getElementById("fifth").style.display = 'none';
}
function hideSomeDivs()
{
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
}
I'm currently using two functions to show and hide elements on a project I'm working on.
One function is for when the element is currently .display = 'block' and the other is for when the element is currently .display = 'none'.
function hide1(id) {
ele = document.getElementById(id);
if (ele.style.display == 'block')
ele.style.display = 'none';
else
ele.style.display = 'block'; }
function hide2(id) {
ele = document.getElementById(id);
if (ele.style.display == 'none')
ele.style.display = 'block';
else
ele.style.display = 'none'; }
I'm all for optimization and am wondering if there is a way to combine both functions into one, or if its fine to keep them as they are.
Cheers,
function hide(id) {
ele = document.getElementById(id);
ele.style.display = (ele.style.display == 'block')?'none':'block';
}
function ChangeDisplay(id,prevDisplay,newDisplay) {
ele = document.getElementById(id);
if (ele.style.display == prevDisplay)
ele.style.display = newDisplay;
else
ele.style.display == prevDisplay;
}
That should do your work