Develop Reference

Show and Hide javascript function not working with multiple functions

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>

Switcher with getElementsByClassName("") not working

I am fairly new to Java but can't seem to fix this problem;
When using getElementsByClassName("") the toggle is not working I get the error "Cannot set property 'display' of undefined"
Also when testing this JS with getElementByID("") when double clicking on the English button the text disappeared completely. I want to keep one visible at all time (so either English/ German)
Is there a solution to fix this?
Thank you in advance :)
function showHideEnglish() {
var english = document.getElementsByClassName("text__english");
var german = document.getElementsByClassName("text__german");
german.style.display = "none";
if (english.style.display == "block") {
english.style.display = "none";
} else {
english.style.display = "block";
}
}
function showHideGerman() {
var english = document.getElementsByClassName("text__english");
var german = document.getElementsByClassName("text__german");
english.style.display = "none";
if (german.style.display == "block") {
german.style.display = "none";
} else {
german.style.display = "block";
}
}
<button onclick="return showHideEnglish();">English</button>
<button onclick="return showHideGerman();">German</button>
<div class="text__english" style="display:block;">This text is English</div>
<div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div>

getElementsByClassName return a a collection of all elements with this class name
you need to access the elements inside the list
if you don't have other elements with the same class name this will work
var english = document.getElementsByClassName("text__english")[0];
var german = document.getElementsByClassName("text__german")[0];

Hide or show elements when user change buttons

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';
});

Triggering a script for multiple similar elements

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>

Javascript code doesn't fire until the 2nd click for an html button?

I'm learning javascript, and this simple piece of code just won't work the way I need it to.
All I need is to display the main tag at the click of a button. HOWEVER, it doesn't want to display until the SECOND click.
So the first click doesn't display the main. The second click does.
I've tried moving my coding around the html document (before/after body closing tag, etc).
I've looked through stack overflow, and similar questions don't really help my case. Or at least I don't understand how they can help me as a beginner.
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain(){
var mainSection = document.getElementsByTagName("main")[0];
if (mainSection.style.display === "none"){
mainSection.style.display = "grid";
}
else{
mainSection.style.display = "none";
}
}
main{display:none;}
<main> ... </main>
<button type="button" id="aboutLink">About</button>
There has to be something I'm missing that prevents that 1st click from firing the code. I mean, it seems simple enough???

if (mainSection.style.display === "none") is looking for an inline style tag, so instead of setting display:none; in your CSS, just set it inline on the element:
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain(){
var mainSection = document.getElementsByTagName("main")[0];
if (mainSection.style.display === "none"){
mainSection.style.display = "grid";
}
else{
mainSection.style.display = "none";
}
}
<main style="display:none;"> ... </main>
<button type="button" id="aboutLink">About</button>

As has been answered, mainSection.style.display is empty. Another option is to get the computed style of the element:
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain() {
var mainSection = document.getElementsByTagName("main")[0];
if (window.getComputedStyle(mainSection).getPropertyValue('display') === "none") {
mainSection.style.display = "grid";
} else {
mainSection.style.display = "none";
}
}
main {
display: none;
}
<main> ... </main>
<button type="button" id="aboutLink">About</button>

var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain(){
var mainSection = document.getElementsByTagName("main")[0];
if (mainSection.style.display || "none" === "none"){
mainSection.style.display = "grid";
}
else{
mainSection.style.display = "none";
}
}
main{display:none;}
<main>text</main>
<button type="button" id="aboutLink">About</button>
Initially mainSection.style.display is empty, so it falls on the else part of the if statement and changes the property to none.
On the second click, the property now has the value of none, that's why it works on the second click.
The HTMLElement.style property is used to get as well as set the inline style of an element.