I am having trouble with this javascript function - when I do the first paragraph by itself it functions normally, but when I create and run the second paragraph, the first show and hide function (ABOUT THE PROJECT) toggles the text to appear on the second paragraph (dialogueOne). Tried renaming id's and the show and hide function and it's not working. I'm running this through cargo collective, the images are hosted through CC and so are called image 4 and image 5.
A link to the page: https://alexabunnell.com/deathspins-spun
<script>
function ShowAndHide() {
var x = document.getElementById('didactic');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<div onclick="ShowAndHide()"><h2>ABOUT THE PROJECT ︎︎︎</h2></div>
<div id="didactic" style="display: block;">{image 4}
</div>
</div>
<div grid-col="1" grid-pad="5"> </div>
</div><div grid-row="" grid-pad="5" grid-gutter="10">
<div grid-col="1" grid-pad="5"></div>
<div grid-col="11" grid-pad="5" class="">
<script>
function ShowAndHide() {
var y = document.getElementById('dialogueOne');
if (y.style.display == 'none') {
y.style.display = 'block';
} else {
y.style.display = 'none';
}
}
</script>
<div onclick="ShowAndHide()">{image 5}</div>
<div id="dialogueOne" style="display: block;"><div style="text-align: center"><h2>Text to be shown and hidden</h2></div></div></div></div>
You have two functions both named ShowAndHide. The second declaration replaces the first one, so any time you invoke it you’ll get the behavior of the latter one.
One solution would be to pass the ID in as an argument to the function instead of hard coding it.
function ShowAndHide(id) {
const element = document.getElementById(id);
// …do whatever you need to do with element
}
<div onClick="ShowAndHide('someid')">…</div>
<div onClick="ShowAndHide('someotherid')">…</div>
Related
I wrote a function to show my span#note- element when span#note is clicked. I want to make span#note- hidden by default, but I can't.
My code:
<h1>Republic of Labrador<br>Sub-Presidential Elections <span onclick="showOnClick()" id="note" title="Not all candidates are listed, and the vote ratioes for the listed candidates are approximated.
Hover over a candidate's name to see their vote ratio.">ⓘ</span></h1>
<br>
<span id="note-">Not all candidates are listed, and the vote ratioes for the listed candidates
are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
<script>
function showOnClick() {
var x = document.getElementById("note-");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
My attempt at hiding span#note- by default:
<span id="note-" onload="hideOnLoad()">Not all candidates are listed, and the vote ratioes for the listed candidates
are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
<script>
function hideOnLoad() {
var y = document.getElementById("note-");
y.style.display = "none";
}
function showOnClick() {
var x = document.getElementById("note-");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I expected span#note- to be hidden by default.
I think you forgot to call your hideOnLoad() function. Either way I think you should hide the element by using CSS by using style="display: none;".
onLoad only works on external resources such as images or the tag. If you want to keep your second example, you'll have to move the onLoad="hideOnLoad()" attribute all the way up to the body tag.
The simpler solution would be to just hide it as part of the initial style of the element style="display:none; in the html. Below is your first example with the element updated.
<h1>Republic of Labrador<br>Sub-Presidential Elections <span onclick="showOnClick()" id="note" title="Not all candidates are listed, and the vote ratioes for the listed candidates are approximated.
Hover over a candidate's name to see their vote ratio.">ⓘ</span></h1>
<br>
<span id="note-" style="display: none;">Not all candidates are listed, and the vote ratioes for the listed candidates
are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
<script>
function showOnClick() {
var x = document.getElementById("note-");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
The easiest way to hide an element by default is with the CSS display property
You can simply add a CSS rule inline inside the HTML tag. Or you can follow better practice and create a separate CSS file.
1. Inline Rule:
Simply add a style attribute to your tag.
<span id="note-" style="display:none;">any content here will not be displayed on initial load</span>
2. CSS File:
Create a separate file called styles.css. In that file create a rule:
span#note- {
display: none;
}
Back in your HTML file, in between the head tags atop the file, link your stylesheet:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Read more at CSS display. In addition to display, you can also try the visibility property if you want the content to take up its space on the page but just not show the content.
In your case, once you have used one of these CSS methods to hide the element, it will be hidden on initial load of the page, and then your showOnClick() script should work to toggle the display on and off.
It looks like your code is correct you just need to call each function. I'm getting it to work correctly when I run the code like this.
function hideOnLoad() {
var y = document.getElementById("note-");
y.style.display = "none";
}
function showOnClick() {
var x = document.getElementById("note-");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
showOnClick(); // Call onclick
hideOnLoad(); // Hide Span on default
Your problem is the onload trigger, it won't work on a . You need to set your code like this, after your 2 functions:
document.addEventListener('load', () => {
hideOnLoad();
})
That said, it would probably be better to set it as display: none; via CSS or style, and simply showing it when needed.
I am creating some sort of filter in a webpage section.
when I click on a button, only the relatives divs should be shown.
The first script i made to make this work, was with one function for each button,
but since I'll have to add a lot more of buttons, I'd like to have only one function, and update it once added a new button.
here's a code similar to that part of the webpage.`
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function filter1(){
var x = document.getElementsByClassName("fruit");
document.getElementById("all").onclick = function(){
x.style.display = "block"
};
document.getElementById("apples").onclick = function(){
x.style.display = "none"; document.getElementsByClassName(".apples").style.display = "block"
};
document.getElementById("lemons").onclick = function(){
x.style.display = "none"; document.getElementsByClassName(".lemons").style.display = "block"
};
}
function filter2(){
var x = document.getElementsByClassName("btn").onclick.textContent;
var y = document.getElementsByClassName("fruit");
if (x.toLowerCase().includes("all")) {
y.style.display = "block";
} else {
y.style.display = "none";
}
if (x.toLowerCase().includes("apples")) {
document.getElementsByClassName("apples").style.display = "block";
}
if (x.toLowerCase().includes("lemons")) {
document.getElementsByClassName("lemons").style.display = "block";
}
}
</script>
</head>
<body onload="filter1()">
<button id="all" class="btn">All</button>
<button id="apples"class="btn">Apples</button>
<button id="lemons"class="btn">Lemons</button>
<section>
<div class="apples fruit">Green Apple</div>
<div class="apples fruit">Red Apple</div>
<div class="lemons fruit">Yellow Lemon</div>
</section>
</body>
</html>
<style type="text/css">
.btn {
display: block
}
.fruit {
display: block
}
</style>
`As you can see I thought of two different methods for this.
the first one "filter1()" by adding an id for each button;
the second one "filter2()" by cheching the .textContent propriety of the buttons.
None of these functions work,
Can someone please tell me what's the right way to do this using Javascript,
or what's wrong with this code?
I'd like to use the "filter2()" function, but if you can fix both of them, it would be great.
I'm a complete beginner to coding.
Thank you so much.
I have multiple HTML elements on the same page and I only want to show a specified 3 elements at a time. Below, I have some code that I got to work. But I have 2 functions for each button and 9 buttons. So I have been trying to figure out what I can do to reduce the bulk. By my estimate it would be 1008 lines of code for this table of contents of 9 buttons.
function clickInfoCampfer() {
var x = document.getElementById("campferfullcard1");
if (x.style.display === "block") {
x.style.display = "block";
} else {
x.style.display = "block";
}
}
function clickInfoCampferClose() {
var x = document.getElementById("pinefullcard1");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
This was my best attempt using forEach. It returns an error saying "opencard.forEach is not a function." The first part of the function is working and manages to close all the elements.
const squares = document.querySelectorAll('.table-of-contents-college-all label');
const allwoodcards = document.querySelectorAll('.all-wood-cards');
squares.forEach(square => {
square.addEventListener('click', clickOutcome)
})
function clickOutcome() {
const opencards = this.getAttribute("opencard");
//opencard=".full-card-campfer"//
allwoodcards.forEach(woodcard => {
woodcard.style.display = "none"
});
opencards.forEach(openup => {
openup.style.display = "block";
});
}
Thanks for your thoughts.
Edit
HTML was requested. This HTML is supporting the forEach Java I have above. It was altered slightly from supporting the first HTML I had. There are many more div elements, I just included Pine and Campfer as the examples.
<body>
<div class="tableofcontentscollege1 table-of-contents-college-all">
<label type="button"
id="campfer-table-button"
opencard=".full-card-campfer"
>
Campfer
</label>
<label type="button"
opencard=".full-card-pine"
>
Pine
</label>
</div>
<div class="full-card-campfer all-wood-cards"
id="campferfullcard1">
</div>
<div class="full-card-campfer all-wood-cards"
id="campferfullcard2">
</div>
<div class="full-card-campfer all-wood-cards"
id="campferfullcard3">
</div>
<div class="full-card-pine all-wood-cards"
id="pinefullcard1">
<div class="full-card-pine all-wood-cards"
id="pinefullcard2">
<div class="full-card-pine all-wood-cards"
id="pinefullcard3">
</div>
</body>
The goal here is to open the 3 div elements related (in name only) to the button, while closing any other div elements amongst the wood list.
Campfer button opens the 3 divs for the campfer information
Pine button opens the 3 divs for the pine information
Walnut button opens the 3 divs for the walnut information
and so on.
Hopefully that clears up any confusion.
I'm just guessing what you want. In the future, supply more context such as the effect you intend, your HTML, etc.
You just need to put the code you had repeated in the event listener:
const squares = document.querySelectorAll('.table-of-contents-college-all label');
squares.forEach(square => {
square.addEventListener('click', handleClick)
})
function handleClick() {
if (this.style.display === "block") {
this.style.display = "none";
} else {
this.style.display = "none";
}
}
I'm just going to create a function that allows me to hide some elements (filters on my website), while the other element ( All Categories) is selected. I'm using Sharetribe - marketplace CMS, here's mine https://rentim.sharetribe.com/
Here's piece of code I wrote to make it happen, but it's not working
document.querySelectorAll('a.home-categories-main:first-child.selected'),
function hideFilters() {
document.getElementById('filters').style.display = 'none';
};
Here is a working example on JSFiddle.
This is a simple example to what you are trying to do using the most basic HTML and JS combination.
Nothing fancy, but it works.
HTML:
<div id="first" onclick="hideFilters();">All</div>
<div id="filters">
<div>Price</div>
<div>Model</div>
<div>Date</div>
<div>Color</div>
</div>
Javascript:
var a = true;
function hideFilters(){
let x = document.getElementById("filters");
if(a){
x.style.display = "none";
}else{
x.style.display = "block";
}
a = !a;
}
Here is a working example on JSFiddle.
In Rentim you should add custom scripts with onDocumentReady function. It's executed after HTML is parsed and all elements rendered.
onDocumentReady(function() {
var filters = document.querySelector('#filters');
var allCategories = document.querySelector('.home-categories-main:first-child.selected');
filters.style.display = allCategories ? 'block' : 'none';
});
So let's say I have text:
<div class="text">Here is some text.
In this text there are links here
and there are links there.
And there are probably many more!
They each open their own annotation on the side.</div>
And I have the following annotations which I want to open up:
<div class="annotation" id="an1">I'm the first annotation!</div>
<div class="annotation" id="an2">And I'm another one!</div>
And I use a script like the following:
function myAnnotation() {
var x = document.getElementById("an1");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
How can I write a script that will grab the ID of my individual links and then open the appropriate annotation?
try this one.
<div class="text">Here is some text.
In this text there are links here
and there are links there.
And there are probably many more!
They each open their own annotation on the side.</div>
<div class="annotation" id="an3" style="display:none">I'm the first annotation!</div>
<div class="annotation" id="an4" style="display:none">And I'm another one!</div>
<script>
$('.link').on('click',function(e){
var id = e.target.attributes.getNamedItem("data-target").value;
var x = document.getElementById(id);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
});
</script>
Working Demo
https://jsfiddle.net/0rhnkzuj/1/
function myAnnotation(argument) {
var x = document.getElementById("an" + argument);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
<div class="text">Here is some text. In this text there are links here and there are links there. And there are probably many more! They each open their own annotation on the side.</div>
<div class="annotation" onclick="myAnnotation(1)">I'm the first annotation!</div>
<div class="annotation" onclick="myAnnotation(2)">And I'm another one!</div>
Note:- You need to create a function and bind that function onClick and pass the parameter there. so you can get dynamic show hide of that function.
Hope this helps !
First: You can't use the same ID twice (or more)
If a understand your question, you want to show up a element on user action (like a click)
I recommend not toggle display.
function myAnnotation(id) {
var x = document.getElementById(id);
x.style.display = "block";
}
<div class="text">Here is some text.
In this text there are links
here
and there are links
there.
And there are probably many more!
They each open their own annotation on the side.</div>
<div class="annotation" style="display:none" id="an1">I'm the first annotation!</div>
<div class="annotation" style="display:none" id="an2">And I'm another one!</div>