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>
Related
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.
<html>
<head><title></title></head>
<body>
<div id="mySidenav1" class="sidenavlogin">
×
Government Departments
Service Agencies
Citizen
</div>
<span class="login" onclick="openNav1()"> Login</span>
<!--api-->
<div id="mySidenav2" class="sidenavapi">
×
eKYB APK
eKYB API
</div>
<span class="api" onclick="openNav2()"> API</span>
<script>
function openNav1() {
document.getElementById("mySidenav1").style.width = "250px";
}
function closeNav1() {
document.getElementById("mySidenav1").style.width = "0";
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "200px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
}
</body>
</html>
in the above code when api panel is opened and when click on the login api panel should close. here i am posting the code please go through this an suggest.
Use style.display="none" instead of specifying width
Here is the updated code. When you click on login, API panel closes. and when you click on API, login panel closes.
function openNav1() {
document.getElementById("mySidenav2").style.display = "none";
document.getElementById("mySidenav1").style.display = "block";
}
function closeNav1() {
document.getElementById("mySidenav1").style.display = "none";
}
function openNav2() {
document.getElementById("mySidenav1").style.display = "none";
document.getElementById("mySidenav2").style.display = "block";
}
function closeNav2() {
document.getElementById("mySidenav2").style.display = "none";
}
.sidenavlogin,
.sidenavapi {
display: none;
}
<div id="mySidenav1" class="sidenavlogin">
×
Government Departments
Service Agencies
Citizen
</div>
+
<span class="login" onclick="openNav1()"> Login</span>
<!--api-->
<div id="mySidenav2" class="sidenavapi">
×
eKYB APK
eKYB API
</div>
+
<span class="api" onclick="openNav2()"> API</span>
use common class for nav blocks.
Like sideNav and style attributes instead of setting width.
function closeAll(){
var divsToHide = document.getElementsByClassName("sideNav");
for(var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "none";
// divsToHide[i].style.width = "0"; // if purpose fully you want to use width then use this
}
}
function openNav1() {
closeAll();
document.getElementById("mySidenav1").style.display = "block";
}
You want to use element.style.display instead of width
element.style.display = 'block'; to show
element.style.display = 'none'; to hide
<html>
<body>
<div id="mySidenav1" class="sidenavlogin">
×
Government Departments
Service Agencies
Citizen
</div>
+
<span class="login" onclick="openNav1()"> Login</span>
<!--api-->
<div id="mySidenav2" class="sidenavapi">
×
eKYB APK
eKYB API
</div>
+
<span class="api" onclick="openNav2()"> API</span>
<script>
function openNav1() {
document.getElementById("mySidenav1").style.display = "block";
}
function closeNav1() {
document.getElementById("mySidenav1").style.display = "none";
}
function openNav2() {
document.getElementById("mySidenav2").style.display = "block";
}
function closeNav2() {
document.getElementById("mySidenav2").style.display = "none";
}
</script>
</body>
</html>
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');