I am trying to build a website and have run into a problem with style.display. I have a similar piece of code in it that works fine and am thus stuck.
I've tried "isolating" both the working and non working code into seperate html files in an attempt to try and find out what is wrong and have tried adding a document.write("hello world") in the javascript file in an attempt to debug it however the tet doesn't show up.
Upon looking into the problem it appears that the issue is with the very first .style.display = "none"; code (the one not in a function) in the javascript code as if you remove it the hello world text shows up however the functions still don't work. This doesn't make sense to me as the working code doesn't have an issue with the style.display and thus I came over to stack exchange after browsing arround to no avail.
The not working html and javascript code is below (the other 5 functions are essentially repeats so they weren't included)
<h1>Activities</h1>
<div class="Activities_Holder">
<div class="Activities_Btns">
<input type="button" value="Activities" id="Activities" onclick="ActivitiesButton()"><!--
--><input type="button" value="Joint Events" id="JE" onclick="JEButton()"><!--
--><input type="button" value="Movie Nights" id="MN" onclick="MNButton()"><!--
--><input type="button" value="Socials" id="Socials" onclick="SocialsButton()"><!--
--><input type="button" value="SocSport" id="SocSport" onclick="SocSportButton()"><!--
--><input type="button" value="Trips" id="Trips" onclick="TripsButton()">
</div>
<div class="Activities_Paragraphs">
<p class="Activities_Text">Activities</p>
<p class="JE_Text">JE</p>
<p class="MN_Text">MN</p>
<p class="Socials_Text">Socials</p>
<p class="SocSport_Text">SocSport</p>
<p class="Trips_Text">TripsText</p>
</div>
<script src="Activities.js"></script>
</div>
var a = document.getElementById("Activities_Text");
var j = document.getElementById("JE_Text");
var m = document.getElementById("MN_Text");
var s = document.getElementById("Socials_Text");
var ss = document.getElementById("SocSport_Text");
var t = document.getElementById("Trips_Text");
j.style.display = m.style.display = s.style.display = ss.style.display = t.style.display = "none";
document.write("hi");
function ActivitiesButton() {
if (a.style.display === "none") {
a.style.display = "block";
j.style.display = m.style.display = s.style.display = ss.style.display = t.style.display = "none";
}
}
The working code is below
<div class="Intro"><!-- container for intro/about section -->
<div class="About">
<h1>Intro / About</h1>
<p id="About_Text">About Text</p>
<p id="Comittee_Text">Comittee text here</p>
<p id="Sponsors_Text">Sponsor text here</p>
</div>
<span>
<div class="About_btns">
<input type="button" value="Comittee" id="Comittee" onclick="ComitteeButton()"><!--
--><input type="button" value="Sponsors" id="Sponsors" onclick="SponsorsButton()">
</div>
</span>
<script src="About.js"></script>
</div>
var x = document.getElementById("About_Text");
var y = document.getElementById("Comittee_Text");
var z = document.getElementById("Sponsors_Text");
y.style.display = z.style.display = "none";
function ComitteeButton() {
if (y.style.display === "none") {
y.style.display = "block";
x.style.display = z.style.display = "none";
document.getElementById("Comittee").value = "About";
document.getElementById("Sponsors").value = "Sponsors";
}
else {
y.style.display = z.style.display = "none";
x.style.display = "block";
document.getElementById("Comittee").value = "Comittee";
document.getElementById("Sponsors").value = "Sponsors";
}
}
function SponsorsButton() {
if (z.style.display === "none") {
z.style.display = "block";
x.style.display = y.style.display = "none";
document.getElementById("Comittee").value = "Comittee";
document.getElementById("Sponsors").value = "About";
}
else {
z.style.display = y.style.display = "none";
x.style.display = "block";
document.getElementById("Comittee").value = "Comittee";
document.getElementById("Sponsors").value = "Sponsors";
}
}
The code is supposed to have 6 buttons and paragraph text underneath. On loading, only the Activities paragraph should be visible - the other paragraphs should be hidden. Upon pressing on the relevant button, the previously shown text should be hidden and the corresponding text should show up instead. This isn't happening for me - all six paragraphs are shown at once and the buttons do nothing.
Thank you in advanced for your time.
You are using getElementById, but not passing id, instead of Id you are passing class name.
<p class="Activities_Text">Activities</p>
<p class="JE_Text">JE</p>
<p class="MN_Text">MN</p>
<p class="Socials_Text">Socials</p>
<p class="SocSport_Text">SocSport</p>
<p class="Trips_Text">TripsText</p>
var a = document.getElementById("Activities_Text");
var j = document.getElementById("JE_Text");
var m = document.getElementById("MN_Text");
var s = document.getElementById("Socials_Text");
var ss = document.getElementById("SocSport_Text");
var t = document.getElementById("Trips_Text");
In this case, all variable will be null and will throw error if you try to use any property.
Instead of using getElementById, you can use getElementsByClassName.
Related
I am assigned to display an image when a secret word is guessed. Everything works fine, but when I use the style "block" to show the image, the actual string "block" shows up with it. I am sure this is an easy fix, but have not found a similar issue. Thanks in advance.
JavaScript:
function getSecretMessage() {
let secretMessage = "Link";
let userMessage = "";
while (userMessage != secretMessage) {
userMessage = prompt("Enter the Secret word.")
}
let showimage = document.getElementById("picture").style.display="block";
document.getElementById("results").innerHTML = "Congratulations!" + showimage;
}
HTML:
<button type = "button" id = "button" onclick="getSecretMessage()">Click here to view the secret message...</button>
<div id = "results">
incomplete information
</div>
<div id = "picture" style= "display:none">
<img src="linkzelda.jpg">
</div>
function getSecretMessage() {
let secretMessage = "Link";
let userMessage = "";
while (userMessage != secretMessage) {
userMessage = prompt("Enter the Secret word.")
}
document.getElementById("picture").style.display="block";
document.getElementById("results").innerHTML = "Congratulations!";
}
<button type = "button" id = "button" onclick="getSecretMessage()">Click here to view the secret message...</button>
<div id = "results">
incomplete information
</div>
<div id = "picture" style= "display:none">
<img width="300" height="300" src="https://images.unsplash.com/photo-1633683536118-ed815cd3dd17?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=764&q=80">
</div>
You seem to have problem here.
let showimage = (document.getElementById("picture").style.display =
"block")
document.getElementById("results").innerHTML =
"Congratulations!" + showimage;
In JavaScript and many other languages, the final value of the assignment is the value of right operand.
let a = b = 3; // a: 3, b: 3
let showimage = (document.getElementById("picture").style.display = "block") // showimage: "block"
Do you just need "Congratulations" message? Then you can fix as following.
document.getElementById("results").innerHTML = "Congratulations!";
here is javascript what i have tried
function toggle(clicked_id,name) {
alert(clicked_id);
alert(name);
var text = document.getElementById("clicked_id");
var ele = document.getElementById("name");
alert(ele.style.display);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "+";
text.value="+"
}
else {
ele.style.display = "block";
text.innerHTML = "-";
text.value="-"
}
return
}
and html is
<input type="button" id="displayText1" onClick="return toggle(this.id,this.name)" value="+" style="margin-left:86%;" name="toggleText1">
<div id="toggleText1" style="display: none"><h1>Wallet Info Here</h1></div> </div>
<input type="button" id="displayText2" onClick="toggle(this.id,this.name)" value="+" style="margin-left:86%;" name="toggleText2">
<div id="toggleText2" style="display: none"><h1>Wallet Info Here</h1></div> </div>
i tried this but only alerts i am getting..no change in div style. That is not changing to hide or show mode
Issue is this:
var text = document.getElementById("clicked_id"); // func arg is in string format
var ele = document.getElementById("name"); // func arg is in string format
You have to use it without quotes.
var text = document.getElementById(clicked_id);
var ele = document.getElementById(name);
yet there is a better way of doing this, you can do something like this:
<input type="button" id="displayText1" onClick="toggle(this)" value="+" style="margin-left:86%;" name="toggleText1">
<input type="button" id="displayText2" onClick="toggle(this)" value="+" style="margin-left:86%;" name="toggleText2">
just pass this in the argument and you can change the function like this:
function toggle(el) {
var text = el;
var ele = document.getElementById(el.name);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "+";
text.value="+"
} else {
ele.style.display = "block";
text.innerHTML = "-";
text.value="-"
}
}
As you don't need to return anything it is just a dom manipulation stuff, so you can remove the return statement.
I suggest you to avoid inline event handlers, so if you are interested in unobtrusive javascript then you can place this event handler in a js file with that toggle() function and you can use it:
document.getElementById('displayText1').addEventListener('click', function(){
toggle(this);
});
document.getElementById('displayText2').addEventListener('click', function(){
toggle(this);
});
or with querySelectorAll method:
document.querySelectorAll('#displayText1, #displayText2').addEventListener('click', function(){
toggle(this);
});
Just remove quotes around variable name
var text = document.getElementById(clicked_id);
var ele = document.getElementById(name);
DEMO
The quotes around the variables "clicked_id" and "name" causes them to act as string. And there are no elements with these id.
Just remove the quotes and things will work out.
var text = document.getElementById(clicked_id);
var ele = document.getElementById(name);
I am having issues with the onclick event in both IE and Chrome. The click event will work well on the first implementation of it but any event after that is not recorded. I have checked the console in both IE and Chrome and they give me no information on any issues. I have pasted my code if you guys could take a look.
html
<div class="userChoice" id="userChoice">
<a class="fauxBtn" id="memberLink" onClick="userSelection(memberLink);">I'm a Member</a>
<a class="fauxBtn" id="nonMemberLink" onClick="userSelection(nonMemberLink);">I'm a Non-Member</a>
<a class="fauxBtn" id="studentLink" onClick="userSelection(studentLink);">I'm a Student</a>
</div>
javascript
function userSelection(userChoice){
var uC = userChoice.id;
var userChoice = document.getElementById("userChoice");
var memTest = document.getElementById("membershipTest");
var memFail = document.getElementById("membershipFail");
var memCosts = document.getElementById("memberCosts");
var nonMemCosts = document.getElementById("nonMemberCosts");
var studentCosts = document.getElementById("studentCosts");
var para = document.getElementById("preAmble");
if(uC == "memberLink"){
nonMemCosts.style.display = "none";
memTest.style.display = "block";
studentCosts.style.display = "none";
userChoice.style.display = "none";
}else if(uC == "nonMemberLink"){
nonMemCosts.style.display = "block";
memTest.style.display = "none";
studentCosts.style.display = "none";
userChoice.style.display = "none";
}else if(uC == "studentLink"){
nonMemCosts.style.display = "none";
memTest.style.display = "none";
studentCosts.style.display = "block";
userChoice.style.display = "none";
}
}
Any help would be useful. Thank you.
Okay Here you go: You had missing ID's in your Html...
http://jsfiddle.net/Z3XvL/3/
<div class="userChoice" id="userChoice">
<a class="fauxBtn" id="memberLink" href="javascript: userSelection('memberLink');">I'm a Member</a>
<a class="fauxBtn" id="nonMemberLink" href="javascript: userSelection('nonMemberLink');">I'm a Non-Member</a>
<a class="fauxBtn" id="studentLink" href="javascript: userSelection('studentLink');">I'm a Student</a>
</div>
<div id="membershipTest">This is membershipTest</div>
<div id="membershipFail">This is membershipFail</div>
<div id="memberCosts">This is memberCosts</div>
<div id="nonMemberCosts">This is nonMemberCosts</div>
<div id="studentCosts">This is studentCosts</div>
<div id="preAmble">This is preAmble</div>
JavaScript
function displayContent()
{
var 1 = getElementById(1);
var 2 = getElementById(2);
var 3 = getElementById(3);
var 4 = getElementById(4);
if(document.form.list.selectedIndex==0) {
1.style.display = "block";
}
if(document.form.list.selectedIndex==1) {
2.style.display = "block";
}
if(document.form.list.selectedIndex==2) {
3.style.display = "block";
}
if(document.form.list.selectedIndex==3) {
4.style.display = "block";
}
}
HTML
<form id="form">
<select onchange="displayContent();" id="list">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</form>
<div id="1">Content1</div>
<div id="2">Content2</div>
<div id="3">Content3</div>
<div id="4">Content4</div>
This is the script and markup that I have put together. I've tried a few different ways before this but all of them result in the same non-solution, just like this one. Nothing happens when I change the option in the select box. Have I missed something?
By default, all the divs are set to display:none;.
Thanks,
Jo
There are several issues with your code, including missing document. from getElementById, not giving your form or select elements a name attribute so you can reference them in js, attempting to create a variable which begins with an integer and having id attributes which begin with integers.
With all that in mind, try this:
function displayContent() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
if(document.form.list.selectedIndex==0) {
div1.style.display = "block";
}
if(document.form.list.selectedIndex==1) {
div2.style.display = "block";
}
if(document.form.list.selectedIndex==2) {
div3.style.display = "block";
}
if(document.form.list.selectedIndex==3) {
div4.style.display = "block";
}
}
Example fiddle
Also note that this can be massively simplified:
function displayContent() {
document.getElementById("div" + (document.form.list.selectedIndex + 1)).style.display = "block";
}
Example fiddle
instead of
getElementById
use
document.getElementById('1');
document.getElementById('2');
document.getElementById('3');
document.getElementById('4');
I CANNOT use jQuery on this project (client policy).
My html code is:
<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" href="javascript:toggle();">show answer</a>
Javascript code is:
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
I cannot get this code to work.
Any suggestions to resolving this?
Here you need to pass two references to your toggle function, one to the target, and one to itself:
<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" href="javascript://" onclick="toggle('dvAnswer<%#Eval("num")%>',this);">show answer</a>
(plus, it's is good practice to use onclick, not href for inline javascript)
Then pass these references to your function:
function toggle(target,me) {
var ele = document.getElementById(target);
var text = me
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
The ID of your element is not toggleText and I don't see an displayText element either.
First your div doesn't have id="toggleText" and no id="displayText"
so what you need to do is create small algorithm for that
function toggle(lnk) {
var num = lnk.getAttribute('id').toString().replace('btn','');
var ele = document.getElementById('dvAnswer'+num);
if(ele.style.display == "block") {
ele.style.display = "none";
lnk.innerHTML = "show";
}
else {
ele.style.display = "block";
lnk.innerHTML = "hide";
}
}
and your html should look like this
<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" onclick="toggle(this); return false;" href="#">show answer</a>
It appears you are calling elements by the wrong IDs. In your HTML, I do not see 'toggleText' or 'displayText' IDs for any of your elements.
The ID looks dynamic from your example. Perhaps just pass the object reference in your function:
function toggle(objRef) {
var ele = document.getElementById(objRef);
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
And HTML of:
<a id="btn<%#Eval("num")%>" href="javascript:toggle("dvAnswer<%#Eval("num")%>");">show answer</a>
Probably your id's in html are not the same as requested by javascript ? This "should" work
<div style="display:none" id="toggleText" class="TextFontBold">A:<%#Eval("answer") %></div>
<a id="displayText" href="javascript:toggle();">show answer</a>