I'm trying to make spoiler on button.
It works well only on JSFIddle.
But It doesn't work in HTML document:
JsFiddle
HTML:
<button onclick="showSpoiler(this);" style="outline: none;" >Spoiler</button>
<span class="inner" style="display:none;">
This is a spoiler!
</span>
JS
window.showSpoiler = function (obj)
{
var inner = obj.parentNode.getElementsByTagName("span")[0];
if (inner.style.display == "none")
{
obj.style.display = "none";
inner.style.display = "";
}
else
inner.style.display = "none";
}
}
Problem:
You do not have any <span> element on your website, and your spoiler onclick is searching for that. With inner.style.display you are trying to access the style property of inner (which is undefined as it could not be found), and hence are getting an error.
Solution:
Change
var inner = obj.parentNode.getElementsByTagName("span")[0];
to
var inner = obj.parentNode.getElementsByTagName("div")[0];
Hope it helps!
Related
I have a query that produces a number of DIV id="toggle_panel" I know I can effectively change the ID of the DIV dynamically.
Below is the script, straight from w3schools, which works great out of the box...for the first DIV and first DIV only. How do I apply a dynamic variable from the query to my script?
Second question: How do I get it so the DIV are hidden by default?
function myFunction() {
var x = document.getElementById("toggle_panel");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Thank you
For your first question, using a class would be more appropriate to tag a collection similar html elements.
So your divs should look something like this:
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
You could then use document.getElementsByClassName('toggle_panel') to access them.
Also to hide them by default, you could use css to target your classes as shown below.
.toggle_panel {
display: none;
}
As mentioned in the comments, you can only have one instance of an ID. To achieve the result you want you will have to change the <div id="toggle_panel">content</div> to <div class="toggle_panel">content</div>. Then use the following javascript:
function myFunction() {
var panels = document.getElementsByClassName("toggle_panel");
for(var i = 0; i < panels.length; i++) {
var panel = panels[i];
if (panel.style.display === "none") {
panel.style.display = "block";
} else {
panel.style.display = "none";
}
}
}
I think you should use querySelectorAll('toggle_panel') and your code will be like this:
Array.from(document.querySelectorAll('toggle_panel')).forEach((element) => {
element.display = 'none'
})
I'm trying to make an element appear when a button is clicked, but when it is, the button moves down. When the button is clicked again, it moves back up.
var p = document.getElementById("p");
function changeDisplay() {
if (p.style.display == "block") {
p.style.display = "none";
} else {
p.style.display = "block";
}
}
<p id="p" style="display: none;">Hello World</p>
<button onclick="changeDisplay()">Button</button>
I could move the button below the p but then another element would just be moved.
You can use visibility property instead. This will hide the element (p), but won't take it out of the layout:
var p = document.getElementById("p");
function changeDisplay() {
if (p.style.visibility == "visible") {
p.style.visibility = "hidden";
} else {
p.style.visibility = "visible";
}
}
<p id="p" style="visibility: hidden;">Hello World</p>
<button onclick="changeDisplay()">Button</button>
And a bit shorter using a ternary (suggested by #AlexandrVyshnyvetskyi):
var p = document.getElementById('p');
function changeDisplay() {
p.style.visibility = (p.style.visibility === 'visible' ? 'hidden' : 'visible');
}
<p id="p" style="visibility: hidden;">Hello World</p>
<button onclick="changeDisplay()">Button</button>
If you want to allocate space for the hidden element instead of using "display" to toggle view use "visibility" property.
if (p.style.visibility == "hidden") {
p.style.visibility = "visible";
} else {
p.style.visibility = "hidden";
}
The only difference between them is that the browser allocate spaces for
visibility: hidden elements.
Hope this helps.
I used one of the codes I found in this website for creating 3 buttons which hided and showed 3 different div's. Code I found was created for 2 div's, so I've tried to edit it to support 3 div's. At first, it looked like it works, but then I noticed one problem: when you click on button which shows first or second div, everything in that div is clickable and when you click on something inside div, it open third div for no reason, how to fix that? Text inside div should not be clickable. Here's link for example of that problem:
http://www.llbm.lt/etnografiniai_regionai/mazoji_lietuva.html
Here's code:
<div class="trys-mygtukai">
<a "href="#" onclick="return showHide();"><img SRC="/etnografiniai_regionai/img/informacija_button.png"</a>
<a "href="#" onclick="return showHide1();"><img SRC="/etnografiniai_regionai/img/architektura_button.png"</a>
<a "href="#" onclick="return showHide2();"><img SRC="/etnografiniai_regionai/img/kita_button.png"</a>
</div>
<div id="pirmas" style="display:none;"></div>
<div id="antras" style="display:none;"></div>
<div id="trecias" style="display:none;"></div>
<script type="text/javascript" language="javascript">
function showHide() {
var ele = document.getElementById("pirmas");
var ele1 = document.getElementById("antras");
var ele2 = document.getElementById("trecias");
ele1.style.display = "none";
ele2.style.display = "none";
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
function showHide1() {
var ele = document.getElementById("pirmas");
var ele1 = document.getElementById("antras");
var ele2 = document.getElementById("trecias");
ele.style.display = "none";
ele2.style.display = "none";
if(ele1.style.display == "block") {
ele1.style.display = "none";
}
else {
ele1.style.display = "block";
}
}
function showHide2() {
var ele = document.getElementById("pirmas");
var ele1 = document.getElementById("antras");
var ele2 = document.getElementById("trecias");
ele.style.display = "none";
ele1.style.display = "none";
if(ele2.style.display == "block") {
ele2.style.display = "none";
}
else {
ele2.style.display = "block";
}
}
You aren't closing the image tags properly
<a "href="#" onclick="return showHide2();"><img SRC="/etnografiniai_regionai/img/kita_button.png"</a>
This should be:
<img SRC="/etnografiniai_regionai/img/kita_button.png">
You made the same mistake with the other 2 images as well, after closing them this behaviour should disappear.
As said before: youre not closing the img tag properly, also this might bug your code:
"href="#" should be href="#"
im trying to change the display attribute of multiple objects through one button, using event listener. It works fine if I just want to change the display on one object at a time but not all three..
any ideas?
http://jsfiddle.net/rn9vrwyg/
var ruta1 = document.getElementById('ruta1')
var ruta2 = document.getElementById('ruta2')
var ruta3 = document.getElementById('ruta3')
document.getElementById('knapp1').addEventListener("click", function(){
ruta1.style.display = "block";
ruta2.style.display = "none";
ruta3.style.display = "none";
});
document.getElementById('knapp2').addEventListener("click", function(){
ruta2.style.display = "block";
ruta1.style.display = "none";
ruta3.style.display = "none";
});
document.getElementById('knapp3').addEventListener("click", function(){
ruta3.style.display = "block";
ruta1.style.display = "none";
ruta2.style.display = "none";
});
<div id="ruta1">
<p>Informationbox #1</p>
</div>
<div id="ruta2">
<p>Informationbox #2</p>
</div>
<div id="ruta3">
<p>Informationbox #3</p>
</div>
These div's and p tags are not closed properly. Close those tags then its working as expected.
I recently got this simple script to show/hide several sections of an html page. I'm using it to show/hide the content of a div by clicking small "+" and "-":
function toggle1() {
var ele = document.getElementById("toggleText1");
var text = document.getElementById("displayText1");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "+";
}
else {
ele.style.display = "block";
text.innerHTML = "-";
}
}
Along with:
<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1><img src="imgs/up.gif" /></a>
<div id="toggleText1" style="display: block">Content here</div>
The code works fine but i'm trying to change the "+" and "-" text links to images links. I have very little knowlege of Javascript and I tried various modifications that made it worst. This original script in in an extrenal .js file.
Any ideas as how to change text links to image links ?
Thank you very much
Your id value is not close properly. Because of that document.getElementById("displayText1") is undefined. so try this
<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1">
instead of your
<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1>
Hope this helps...
If I'm understanding correctly, you could make your image links in advance, then just append them to the element where the '+' and '-' were before:
var showControlImage = new Image(),
hideControlImage = new Image();
showControlImage.src = "path/to/showImage.png";
hideControlImage.src = "path/to/hideImage.png";
// Then just use your toggle function with minor changes:
function toggle1() {
var ele = document.getElementById("toggleText1");
var text = document.getElementById("displayText1");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "";
text.appendChild = showControlImage;
}
else {
ele.style.display = "block";
text.innerHTML = "";
text.appendChild = hideControlImage;
}
}
Also, you should clean up your tag as per Chandan's suggestion.