Develop Reference

Why does my JS 'click event' only run once?

I created a click event that opens a previously 'hidden' div and closes it again once you click the same button.
However, it only runs once (one open and one close) - I'm at a loss to explain why it doesn't work if I click it again.
let readMore = document.getElementById('clickAbout');
let moreInfo = document.getElementById('about');
let changeSepa = document.getElementById('sepChange');
readMore.addEventListener('click', function(){
changeSepa.style.height = '2rem';
if (moreInfo.className == "") {
moreInfo.className = "open";
moreInfo.style.display = 'block';
} else {
moreInfo.style.display = 'none';
}
});

this happens because you're checking if className == "", but you are modifying the className to be "open". On the second click it checks the className which is now "open" and goes to the else block. On the third click you expect for it to go into the first block but the className is still "open".
For an easy fix just change the className in the else block
else {
moreInfo.className = "";
moreInfo.style.display = 'none';
}
Also i suggest you make use of the classList property on elements
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
using the class list it could look like this:
readMore.addEventListener("click", function () {
changeSepa.style.height = "2rem";
if (moreInfo.className == "") {
moreInfo.classList.add("open");
moreInfo.style.display = "block";
} else {
moreInfo.classList.remove("open");
moreInfo.style.display = "none";
}
});
Or even
readMore.addEventListener("click", function () {
changeSepa.style.height = "2rem";
moreInfo.classList.toggle("open");
if (moreInfo.className == "") {
moreInfo.style.display = "block";
} else {
moreInfo.style.display = "none";
}
});

JS Div tag is not hiding with if and else statements

function nes(){
if (document.getElementById('nes').style.display == 'block'){
document.getElementById('nes').style.display = 'none';
}
else if (document.getElementById('snes').style.display == 'block') {
document.getElementById('snes').style.display = 'none';
}
else if (document.getElementById('gba').style.display == 'block') {
document.getElementById('gba').style.display = 'none';
}
else if (document.getElementById('sega').style.display == 'block') {
document.getElementById('sega').style.display = 'none';
}
else if (document.getElementById('flash').style.display == 'block') {
document.getElementById('flash').style.display = 'none';
}
else if (document.getElementById('n64').style.display == 'block') {
document.getElementById('n64').style.display = 'none';
}
else if (document.getElementById('all').style.display == 'block') {
document.getElementById('all').style.display = 'none';
}
document.getElementById('snes').style.display = 'block';
}
<input id=nesdot type="image" src="C:\Users\Me\Documents\Website\Assets\Home Page\selection dot.png", onclick='nes()'/>
<div id=nes>
<input type="image" src="C:\Users\Sam Scolari\Documents\Totally Not An Arcade\Assets\Home Page\Adjusted Logos\NES.png"/>
</div>
<div id=all>
<input type="image" src="C:\Users\Sam Scolari\Documents\Totally Not An Arcade\Assets\Home Page\Adjusted Logos\A2Z.png"/>
</div>
I am trying to replace a picture that is in a div tag with javascript. When I click the button it seems to skip over all of the if and else statements and goes right to the single command at the end of the function. Is there something wrong with the syntax of the statements? It outputs to my website by adding the next image directly under the one that was supposed to be replaced. Any ideas? Thanks.

You might try this code:
function nes(){
var elem = document.getElementById('nes');
var displayStyleNes = null;
if (elem.style.display) {
displayStyleNes = elem.style.display;
} else if (elem.currentStyle) {
displayStyleNes = elem.currentStyle.display;
} else if (window.getComputedStyle) {
displayStyleNes = window.getComputedStyle(elem, null).getPropertyValue("display");
if (displayStyleNes === 'block'){
document.getElementById('nes').style.display = 'none';
}
//.....
}

Your IDs in HTML need quotes to be effective. The inspector won't prompt you any errors but the IDs will not be affected.
<input id="snes"/>
I assume that your function is wrapped in a script normally? If not, that is another problem!
Hope this helps :)

javascript change toggle button text

I have this piece of code which i use for language toggling:
function toggleDiv(divid) {
varon = divid + 'on';
varoff = divid + 'off';
if(document.getElementById(varon).style.display == 'block'){
document.getElementById(varon).style.display = 'none';
document.getElementById(varoff).style.display = 'block';
}
else {
document.getElementById(varoff).style.display = 'none';
document.getElementById(varon).style.display = 'block'
}
}
and HTML:
<div id="mydivon" style="display:block">some language text</div>
<div id="mydivoff" style="display:none">some other language text</div>
Language1/Language2
and i would like to make toggle button switchable, when one Language1 is selected, switch toggle text to Language2 and vice versa. Some pointers would be welcome. Thx

I've setup a Fiddle , is this the effect you wanted to achieve? As #Shilly already said in the comments, you can use textContent to change the content of your anchor tag.
I've assigned an ID to your anchor #languageSwitch so I can do following stuff in your JS
HTML
<div id="mydivon" style="display:block">
Language 1 is selected
</div>
<div id="mydivoff" style="display:none">
Language 2 is selected
</div>
<a id="languageSwitch" href="#" onmousedown="toggleDiv('mydiv');">
Switch to Language2
</a>
JS
function toggleDiv(divid) {
varon = divid + 'on';
varoff = divid + 'off';
// Assign the switch anchor to a variable
var switcher = document.getElementById('languageSwitch');
if (document.getElementById(varon).style.display == 'block') {
document.getElementById(varon).style.display = 'none';
document.getElementById(varoff).style.display = 'block';
//Change the text to language1 (language 2 is active)
switcher.textContent = "Switch to Language1";
} else {
document.getElementById(varoff).style.display = 'none';
document.getElementById(varon).style.display = 'block'
//Change the text to language2 (language 1 is active)
switcher.textContent = "Switch to Language2";
}
}

As described by the OP in the comments:
Currently you're displaying an element on wether it's selected but the toggle itself isn't changing language.
Now what you can do is when you mousedown and execute toggleDiv(divid)
there should be a special variable to your disposal called this
this basically means "this called me" in the most simple form.
In your case this is the Language1/Language2 link
So what you could do then within your function:
function toggleDiv(divId) {
//also highly recommend you cache your variables
varon = document.getElementById(divId + 'on');
varoff = document.getElementById(divId + 'off');
if (varon.style.display == 'block') {
varon.style.display == 'none';
varoff.style.display = 'block';
this.innerHTML = varoff.innerHTML; // <- selected element value injected in bound button
} else
varon.style.display == 'block';
varoff.style.display = 'none';
this.innerHTML = varon.innerHTML; // <- selected element value injected in bound button
}
With the line this.innerHTML = varon/off.innerHTML you're saying, "the element that called me has to have the value of the block element"
The value will still default be Language1/Language2 but as soon as you change it it will update.
Hope it helps!
NOTE: UNTESTED

Step 1: Add an id to your link:
<a id="toggle-language" href="#" onmousedown="toggleDiv('mydiv');">Language1/Language2</a>
Step 2: Change your function to:
function toggleDiv(divid) {
var on = document.getElementById(divid + 'on'),
off = document.getElementById(divid + 'off'),
language = document.getElementById('toggle-language');
if (on.style.display == 'block'){
on.style.display = 'none';
off.style.display = 'block';
language.textContent = 'Language 2';
}
else {
on.style.display = 'block';
off.style.display = 'none';
language.textContent = 'Language 1';
}
}

jquery show and hide

i have a javascript code that when a link is clicked, it can show and hide divisions of the page.
function shoh(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
if (document.getElementById(id).style.display == "none"){
$(id).fadeIn();
} else {
$(id).hide();
}
} else {
if (document.layers) {
if (document.id.display == "none"){
document.id.display = 'block';
} else {
document.id.display = 'none';
}
} else {
if (document.all.id.style.visibility == "none"){
document.all.id.style.display = 'block';
} else {
document.all.id.style.display = 'none';
}
}
}
}
however it now doesn't work when i added the jquery fadeIn and hide instead of using the document.getElementByid method. why?

In order to select an element by id with jQuery, you have to use the selector syntax which means appending a # to the id. So, change
$(id).fadeIn();
to
$("#" + id).fadeIn();

Try this:
function shoh(id) {
var el = $('#' + id);
if (el.is(':visible')) {
el.hide();
} else {
el.fadeIn();
}
}

Due jquery works for you, you won't write crossbrowser code.
So simply
var $el = $('#'+id); // <-- this is the main key :-)
if ($el.css('display') == "none"){
$el.fadeIn();
} else {
$el.hide();
}

You could just declare it as a variable and then wrap it in a jQuery selector:
var $el = $(document.getElementById(id));
// if
$el.fadein();
//else
$el.hide();
jsFiddle

How do I get the divs to show in javascript?

I have this script on dynamic radio buttons... On load the divs display, great. One is automatically checked, great. If I click the other radio button the divs hide, great. When I click back to the main radio button to show the divs again the divs don't reappear.
How do I get the divs to reappear (show)?????
function hide() {
var ele = document.getElementById("hideRow");
var coup = document.getElementById("coup");
if ("hideRow") {
ele.style.display = "none";
coup.style.display = "none";
} else {
ele.style.display = "block";
coup.style.display = "block";
}
}

Try :
function hide() {
var ele = document.getElementById("hideRow");
var coup = document.getElementById("coup");
if (ele.style.display == "block") {
ele.style.display = "none";
coup.style.display = "none";
} else {
ele.style.display = "block";
coup.style.display = "block";
}
}

This is always true:
if ("hideRow") {
// Always executes
}
So, you only ever get to the if-block. You need to change the conditional on your if-statement.

if (ele.style.visibility == 'visible';) {
ele.style.visibility = 'hidden';
coup.style.visibility = 'hidden';
} else {
ele.style.visibility = 'visible';
coup.style.visibility = 'visible';
}
I may have entirely missed the mark and not understood what your trying to do, but that's the way I'd do it (I think - you may be trying to do something else).