Change style.display on multiple objects through one button JAVASCRIPT - javascript

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.

Related

Display button value in div onclick. Javascript/HTML

I have a set of buttons with different values. When I press a button I want the value of the button to be displayed in the div picked_letters, but nothing is showing. The code is divided in an html file and a javascript file.
html file looks like this:
<body>
<script src="cases.js"></script>
<div id="written_word">
</div>
<div id="list_of_letters">
</div>
<div id="picked_letters">
</div>
</body>
and the onclick in the javascript file looks like this:
for(let i = 0; i < 26; i++) {
let btn = document.createElement("button");
btn.style.background = 'silver';
btn.style.width = '15%';
btn.style.fontWeight = 'bold';
btn.style.fontSize = '135%';
btn.style.display = 'inline-block';
btn.value = case_values[i];
btn.onmouseover = function (){
btn.style.background = 'goldenrod';
}
btn.onmouseleave = function() {
btn.style.background = 'silver';
}
btn.onclick = function() {
btn.style.background = 'darkgrey';
btn.disabled = true;
btn.innerHTML = String(btn.value);
document.getElementById("picked_letters").innerHTML =
String(btn.value);
}
btn.innerHTML = String(i+1);
document.body.appendChild(btn);
}
The button changes color, becomes disabled and displays the value inside the button but it's the last line with getting the button value into a div that I am having problems with. Have looked around but haven't found a solution that solves this problem.
##Edit: The problem seems to have been fixed when I put the script import at the end of the body (and some other minor changes).
Where are you setting the value of the button?
Can you share the button code?
Does your button look like this?
<button>My Button</button>
or do you set your value like this?
<button value="my button value">My button</button>
If you have a value set - you can do this:
btn.onclick = function () {
console.log(btn.innerHTML);
btn.style.background = "darkgrey";
btn.disabled = true;
document.getElementById("picked_letters").innerHTML = btn.value;
};
If you don't have a value set - using btn.value won't return anything.
I would try adding a value to your button if you dont have one. Or if you want to call the innerhtml of the button:
<button>My button</button>
and then
btn.onclick = function () {
console.log(btn.innerHTML);
btn.style.background = "darkgrey";
btn.disabled = true;
document.getElementById("picked_letters").innerHTML = btn.innerHTML;
};
The code above is perfectly fine, the is definately being displayed in the "picked_letters" div, but the value of btn is ""(empty) so the value set to the div is also empty. To solve this issue, add value to the button by doing:-
. and the issue will be gone.
const btn = document.querySelector('#btn')
btn.onclick = function() {
btn.style.background = 'darkgrey';
btn.disabled = true;
console.log(btn.value)
btn.innerHTML = String(btn.value);
document.getElementById("picked_letters").innerHTML =
String(btn.value);
}
<body>
<div id="written_word">
</div>
<div id="list_of_letters">
</div>
<div id="picked_letters">
</div>
<button id='btn' value='5'>Tap me</button>
</body>

How can I have infinite clicks on my button because after i click the button it does not work anymore

<script type="text/javascript">
//this will make it appear
function showPicture() {
var sourceOfPicture = "img/tierlist.jpg";
var img = document.getElementById('tierlist')
img.src = sourceOfPicture.replace('90x90', '225x225');
img.style.display = "block";
}
// this will remove the picture
function removePicture() {
var image_x = document.getElementById('tierlist');
image_x.parentNode.removeChild(image_x);
img.style.display = "block";
}
</script>
I want it to have an infinite amount of clicks and not just a one and done button, how do I do it?
Your button won't show the image again after you hide it was because of this line
image_x.parentNode.removeChild(image_x);
You are removing the element out of the page completely so when you select it again with
var img = document.getElementById('tierlist')
it won't be able to find the item.
Suggestion: Setting the display style of the item to "none" when you want to hide it and set it to "block" when you want to display it.
Example:
function toggle(){
var txtDiv = document.getElementById('tierlist');
if(txtDiv.style.display == "none"){
txtDiv.style.display = "block"
} else{
txtDiv.style.display = "none"
}
}
<div id="tierlist">Hello</div>
<button onclick="toggle()">Show/hide</button>

js toggle for multiple divs

I have 3 div which are hidden by default. I want to create a toggle for these 3 but I don't want to create onclick for each div and add this to the js file:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I tried creating this scenario with clicked_id but it failed. When I click on the third div, the second one views aswell.
var projectEen = document.getElementById("projectInhoud");
projectEen.style.display = "none";
var projectTwee = document.getElementById("projectInhoudTwee");
projectTwee.style.display = "none";
var projectDrie = document.getElementById("projectInhoudDrie");
projectDrie.style.display = "none";
function displayFunction(clicked_id) {
if (clicked_id == 1) {
projectEen.style.display = "block";
} else {
projectTwee.style.display = "block";
} if(clicked_id == 3) {
projectDrie.style.display = "block";
} else {
projectTwee.style.display = "none";
}
}
How can I use the first code but to display all 3 div without creating the function 3 times?
EDIT:
My html
<div id="1" onclick="displayFunction(this.id)" class="projectTitel">
<h1>Project: a</h1>
</div>
<div id="projectInhoudEen" class="projectInhoud"> content </div>
<div id="2" onclick="displayFunction(this.id)" class="projectTitel">
<h1>Project: b</h1>
</div>
<div id="projectInhoudTwee" class="projectInhoud"> content </div>
<div id="3" onclick="displayFunction(this.id)" class="projectTitel">
<h1>Project: c</h1>
</div>
<div id="projectInhoudDrie" class="projectInhoud"> content </div>
By combining document.getElementsByClassName and EventTarget.addEventListener, you can attach the same event handler to your divs. Inside this handler, you can retrieve the element you clicked on with the event object, provided by the event listener.
EDIT : The HTML you provided makes things a little more complicated because the projectTitel and projectInhoud divs aren't related to each other, except by position.
So, in order to display the right projectInhoud div, we need to find the next projectInhoud after the projectTitel that was clicked on.
To make things better, I would suggest editing the HTML to make projectTitel and projectInhoud divs children of a same parent div.
Meanwhile, I added a getClickedProjectIndex function returns the index of the clicked projectTitel div. And the click event uses this index to show the right projectInhoud.
Then, you can use a simple toggle function that displays the div if it's not visible or hide it if it's visible.
var divs = document.getElementsByClassName("projectTitel");
[...divs].forEach(someDiv => someDiv.addEventListener("click", handler));
// by default, all projectInHound are hidden
hideElements("projectInhoud");
function handler(event) {
// get the clicked project's index :
var projectIndex = getClickedProjectIndex(event);
// toggle the right projectInhoud div :
toggleDiv(document.getElementsByClassName("projectInhoud")[projectIndex]);
}
// hide all elements that have the provided class name
function hideElements(className) {
var elements = document.getElementsByClassName(className);
[...elements].forEach(element => element.style.display = "none");
}
function getClickedProjectIndex(event) {
var elements = document.getElementsByClassName("projectTitel");
var projectIndex = 0;
[...elements].forEach((element, index) => {
if (element.id == event.currentTarget.id) {
projectIndex = index;
}
});
return projectIndex;
}
function toggleDiv(element) {
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
<div id="1" class="projectTitel">
<h1>Project: a</h1>
</div>
<div id="projectInhoudEen" class="projectInhoud" > content a</div>
<div id="2" class="projectTitel">
<h1>Project: b</h1>
</div>
<div id="projectInhoudTwee" class="projectInhoud"> content b</div>
<div id="3" class="projectTitel">
<h1>Project: c</h1>
</div>
<div id="projectInhoudDrie" class="projectInhoud"> content c</div>
I would try something like this in the HTML:
<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>
And for your JavaScript:
function myFunction(element){
if(element.style.display = "none"){
element.style.display = "block";
else{
element.style.display = "none";
}
}

3 Buttons show/hide 3 div's in javascript

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="#"

Spoiler on button

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!

Categories