Show/Hide onClick button not working - javascript

Hey guys I have searched for many answers and none of them seem to be working so I am going to put my code here and hopefully you can help me figure this out.
I am going to have two buttons. The first button (show_Chappie) is going to show the hidden contents and another button (hide_Chappie) and hides it self when clicked.
The second button (hide_chappie) is going to hide the contents and bring back the first button (show_chappie). The hide_chappie button itself would also be hidden.
The information div is already hidden from the start. I did this on the CSS using the display:none;
Here's my HTML code so far:
<button class ="show_chappie" onclick="showInfo()">Show More</button>
<div class="info">Info here.</div>
<button class ="hide_chappie" onclick="hideInfo()">Show Less</button>
Here's my JavaScript code so far:
function showInfo(){
document.getElementById('chappie_info').style.display = "inline-block";
document.getElementById('show_chappie').style.display = "none";
document.getElementById('hide_chappie').style.display = "inline-block";
}
I haven't written the code for the hide_chappie button because I wanted to see this working first.
So where have I gone wrong here? Thanks for the help in advance.

You are trying to get the elements by id while they have a class, you should change the elements class to id like this:
<button id="show_chappie" onclick="showInfo()">Show More</button>
<div id="info">Info here.</div>
<button id="hide_chappie" onclick="hideInfo()">Show Less</button>

you should change your code to:
<button id ="show_chappie" onclick="showInfo()" >Show More</button>
<div class="info">Info here.</div>
<button id= "hide_chappie" onclick="showInfo()">Show Less</button>
if you want to use class here,you should change your Javascript Code to
function showInfo(){
document.getElementByClass('chappie_info')[0].style.display = "inline-block";
document.getElementByClass('show_chappie')[0].style.display = "none";
document.getElementByClass('hide_chappie')[0].style.display = "inline-block";
}
because function getElementsByClass returns a collection,so you should add [] to find out the result you want!

It's kind of annoying to turn all id's into classes, you can use:
function showInfo(){
document.getElementsByClassName('chappie_info').style.display = "inline-block";
document.getElementsByClassName('show_chappie').style.display = "none";
document.getElementsByClassName('hide_chappie').style.display = "inline-block";
}
This is supported by practically every browser these days so I wouldn't worry about that. If that is still an issue an you need to support ancient browsers, use this:
document.getElementsByClassName = function (a) {
var b = document.getElementsByTagName('*'), i, c=[];
for (i = 0; i < b.length; i += 1) { b[i].getAttribute('class')===a&&c.push(b[i]); }
return c;
};

Related

Javascript not changing styles in CSS cheet

sorry if this is very simple but I am very new to programming.
The rest of my code is working fine, but I am trying to add a button which is hidden unless a certain element is added.
The code I have so far is this:
HTML:
<button onclick="setRace(); setSubRace()">Reroll Race</button>
<p id="race"></p>
<button id="rerollSubrace" onclick="setSubRace()">Reroll Subrace</button>
<p id="subrace"></p>
</div>
CSS:
#rerollSubrace {
display: none;
}
Javascript:
let showSubButton = document.getElementById("rerollSubrace").style.display = "inline";
...
function setSubRace() {
if (globalRace === "Aasimar") {
aasSubRace();
showSubButton;
The function continues for all options, and everything else in the setSubRace function works absolutely fine, the button just does not display.
Any advice would be great! Thank you in advance for all of your help!
The issue is with the way you declare your function showSubButton.
Thy the syntax ()=>{} instead.
let showSubButton = () => {document.getElementById("rerollSubrace").style.display = "inline";}
Here is a JsFiddle
Otherwise your statement is being always executed, setting the style to "inline".

A toggle function for different buttons

I'd like to make two different buttons in vanilla JavaScript that, when clicked one after the other, display a different text message.
Any advice in reorganising the code below? Thanks.
I could find a toggle function for one button but not for different buttons.
index.html
<button onclick="revealMessageUk()"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>
<button onclick="revealMessageSpain()"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>
<p id="hiddenMessageUk" style="display:none">Hello!</p>
<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>
index.js
function revealMessageUk() {
document.getElementById('hiddenMessageUk').style.display = 'block';
}
function revealMessageSpain() {
document.getElementById('hiddenMessageSpain').style.display = 'block';
}
I'd like to not only display like hereafter but have a sort of a toggle function (hide/show or add/remove feature) for the two foreign languages below.
try
function revealMessage(msg) {
hiddenMessage.style.display='block';
hiddenMessage.innerText=msg;
}
<button onclick="revealMessage('Hello!')"><li><img class="flag-pictures" src="images/uk.svg" id="1" alt='UK'/></li></button>
<button onclick="revealMessage('¡Hola!')"><li><img class="flag-pictures" src="images/spain.svg" id="3" alt='ES'/></li></button>
<p id="hiddenMessage" style="display:none"></p>
Here is a way to toggle, but also keep it flexible when more locales will be added. You keep a sort of a selectedLocaleId "state" and change it when one of the buttons is clicked with the corresponding locale id.
let selectedLocaleId;
function selectLocale(newSelectedLocaleId) {
// If there is a selected locale id, un-select it
if (selectedLocaleId) {
document.getElementById(selectedLocaleId).style.display = 'none';
}
// set the new selected locale id
selectedLocaleId = newSelectedLocaleId;
document.getElementById(selectedLocaleId).style.display = 'block';
}
<button onclick="selectLocale('hiddenMessageUk')"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>
<button onclick="selectLocale('hiddenMessageSpain')"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>
<p id="hiddenMessageUk" style="display:none">Hello!</p>
<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>
Hope this helps :)
Cheers

Div doesn't stay visible

I have 4 links. When I click the first link div 1 should be displayed and the other 3 hidden.
When I click link 2, div 2 should be displayed and the other 3 hidden, and so on...
What I did:
With CSS I've set the class of the 4 divs to display: none
Created 4 functions with javascript that set the display property of the correct div to block and the 3 others to none
Call the function when clicking the link
When I click a link, the div is shown for a quarter of a second but then it disappears again
CSS:
.CatDiv {
display:none;
}
JS function:
function showKadoballonnen() {
document.getElementById("Kadoballonnen").style.display = "block"
document.getElementById("Geschenkmanden").style.display = "none"
document.getElementById("Pampercadeaus").style.display = "none"
document.getElementById("OrigineleVerpakkingen").style.display = "none";
}
Calling the function:
Kadoballonnen
Div that has to be called:
<div id="Kadoballonnen" class="CatDiv">TEST</div>
function showKadoballonnen(e) {
e.preventdefault();
document.getElementById("Kadoballonnen").style.display = "block";
document.getElementById("Geschenkmanden").style.display = "none";
document.getElementById("Pampercadeaus").style.display = "none";
document.getElementById("OrigineleVerpakkingen").style.display = "none";
}
.CatDiv {
display: none;
}
Kadoballonnen
<div id="Kadoballonnen" class="CatDiv">TEST</div>
<div id="Geschenkmanden" class="CatDiv">TEST</div>
<div id="Pampercadeaus" class="CatDiv">TEST</div>
<div id="OrigineleVerpakkingen" class="CatDiv">TEST</div>
What am I missing?
All is easier than you think. In your tag you got "href" with empty parameter. It makes your page reloading while pressing on it.
So all you should do is to write "#" as a parameter.
Kadoballonnen
You should avoid empty href attribute on a link. Use a button instead.
If it still does not work, attach your method to window object. Also, I don't recommend this approach, you should handle it in your Javascript by targetting at your DOM elements using an ID for example and adding your event listener from here.
document.getElementById('myelement').addEventListener('click', showKadoBallonnen);
You have a few errors in your code, and you also need to stop your link (<a>) firing.
On your link, add return false;:
Kadoballonnen
<!-- ^ Also, add href="#" so you don't have an empty href -->
Also, add semicolons to the end of each line of your javascript:
document.getElementById("Kadoballonnen").style.display = "block";
document.getElementById("Geschenkmanden").style.display = "none";
document.getElementById("Pampercadeaus").style.display = "none";
document.getElementById("OrigineleVerpakkingen").style.display = "none";
I was running into this problem while writing some coffeescript in a rails application. Another answer helped me.
The solution is the event.preventDefault() as shown below:
app/views/posts/index.html.erb:
<%= link_to "Some link", '#', id: 'some-link' %>
<div class="some-div">
<h4>Some list</h4>
<ul id='some-list'>
<li>cats</li>
<li>and</li>
<li>dogs</li>
</ul>
</div>
app/assets/javascripts/posts.coffee:
$(document).on 'turbolinks:load', ->
$('#some-link').click (event) ->
event.preventDefault()
$('#some-list').toggle()
I managed to make it working: https://jsfiddle.net/ke81koj6/
function showKadoBallonnen() {
document.getElementById("one").style.display = "block";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "none";
document.getElementById("four").style.display = "none";
}
EDIT
Edited the fiddle and now works with the press on a button. It's better to use a button than an anchor with a empty href.
HTML:
<button id="button" onclick="showKadoBallonnen()">click here</button>
JS:
document.getElementById("button").onclick = showKadoBallonnen;

Javascript -> CSS (display:none to display:block)

I have 3 divs + 3 hidden divs. I want to click on "service1" and edit "display:block" in "toggle1".
The HTML:
<div id="service1" onclick="changeService('toggle1')></div>
<div id="service2"></div>
<div id="service3"></div>
<br><br>
<div id="toggle1"></div>
<div id="toggle2"></div>
<div id="toggle3"></div>
The CSS:
#toggle1, #toggle2, #toggle3 {display:none}
The Javascript:
function changeService(this) {
this.style.display = "block";
}
Hope I explained myself well enough so you guys can understand. What am I doing wrong?
Thanks in advance :)
You are passing a string into function, not an object. You can use document.getElementById method to get corresponding div element:
function changeService(id) {
document.getElementById(id).style.display = "block";
}
I think it would be best to use CSS classes.
So go:
#toggle1, #toggle2, #toggle3 {display:none}
#toggle1.active, #toggle2.active, #toggle3.active{display: block}
And then:
function changeService(id) {
document.getElementById(id).setAttribute("class", "active");
}
Then you can keep view and logic separated and easily add more style if necessary. Try never to change your CSS in Javascript. Better add classes like this to keep things clear.
https://jsfiddle.net/t74tmu7r/2/
first of all place your script file before the closing body tag to make sure all DOM elements are loaded then use this code:
function changeService(id){
var elem = document.getElementById(id);
elem.style.display = "block";
}
then in the div tag with a class name 'service1' do this:
<div id="service1" onClick="changeService('toggle1');"></div>
that should do the job.

Javascript if else statement to hide and show div

Please refer to the following codes :
<div id="message-1" onclick="javascript:showresponddiv(this.id)>
</div>
<div id="respond-1" style="display:none;">
</div>
<div id="message-2" onclick="javascript:showresponddiv(this.id)>
</div>
<div id="respond-2" style="display:none;">
</div>
<script type="text/javascript">
function showresponddiv(messagedivid){
var responddivid = messagedivid.replace("message-", "respond-");
if (document.getElementById(responddivid).style.display=="none"){
document.getElementById(responddivid).style.display="inline";
} else {
document.getElementById(responddivid).style.display="none";
}
}
</script>
The codes above already success make the respond div appear when user click on message div. The respond div will disappear when user click on message div again. Now my question is how to make the respond div of 1st message disappear when user click on 2nd message to display the respond div of 2nd message?
You should give the "respond" divs a common class:
<div id="respond-1" class="response' style="display:none;"></div>
Then you can get all divs by using getElementsByTagName, compare the class and hide them on a match:
function hideAllResponses() {
var divs = document.getElementsByTagName('div');
for(var i = divs.length; i-- ;) {
var div = divs[i];
if(div.className === 'response') {
div.style.display = 'none';
}
}
}
We cannot use getElementsByClassName, because this method is not supported by IE8 and below. But of course this method can be extended to make use of it if it is supported (same for querySelectorAll). This is left as an exercise for the reader.
Further notes:
Adding javascript: to the click handler is syntactically not wrong but totally unnecessary. Just do:
onclick="showresponddiv(this.id)"
If you have to do a lot of DOM manipulation of this kind, you should have a look at a library such as jQuery which greatly simplify such tasks.
Update: If always only one response is shown and you are worried about speed, then store a reference to opened one:
var current = null;
function showresponddiv(messagedivid){
var id = messagedivid.replace("message-", "respond-"),
div = document.getElementById(id);
// hide previous one
if(current && current !== div) {
current.style.display = 'none';
}
if (div.style.display=="none"){
div.style.display="inline";
current = div;
}
else {
div.style.display="none";
}
}
Edit: Fixed logic. See a DEMO.
You can add some class to all divs with id="respond-"
e.g
<div id="respond-1" class="classname" style="display:none;"></div>
<div id="respond-2" class="classname" style="display:none;"></div>
Now at first row of your function "showresponddiv()" you should find all divs with class "classname" and hide them.
With jQuery it is simple code:
$(".classname").hide();
jQuery - is a Javascript Library that helps you to easy manipulate with DOM and provides cross-browser compatibility.
Also you can look to Sizzle - it is a JavaScript CSS selector engine used by jQuery for selecting DOM elements

Categories