<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>
Related
Idk whats wrong, I tried adding id to buttons and that didn't work either so I just went back to using the class of the buttons in querySelect. I also tried using onclick and still no response. The button is supposed to turn green or red when clicked depending on whether it is correct. There are also no errors in developer tools.
< script >
function Q1correct() {
correct.style.backgroundColor = 'green';
document.querySelector('#resultQ1').innerHTML = 'Correct!';
}
function Q1wrong() {
for (let i = 0; i < incorrects.length; i++) {
incorrects[i].style.backgroundColor = 'red';
document.querySelector('#resultQ1').innerHTML = 'Wrong :(';
}
}
function Q2() {
if (secondQ.value.toLowerCase() == "yes") {
secondQ.style.backgroundColor = 'green';
document.querySelector('#resultQ2').innerHTML = 'Correct!';
}
else {
secondQ.style.backgroundColor = 'red';
document.querySelector('#resultQ2').innerHTML = 'Wrong :(';
}
}
document.addEventListener('DOMContentLoaded', function() {
let correct = document.querySelector('.correct');
correct.addEventListener('click', correct);
let incorrects = document.querySelectorAll('.incorrect');
incorrects.addEventListener('click', Q1wrong);
let secondQ = document.querySelector('#check');
secondQ.addEventListener('click', Q2);
});
<
/script>
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>What is Dwayne "The Rock" Johnson's real middle name? </h3>
<button class='incorrect'>Johnsons</button>
<button class='incorrect'>Pebble</button>
<button class='correct'>Douglas</button>
<button class='incorrect'>Teetsy</button>
<button class='incorrect'>Lewis</button>
<p id='resultQ1'></p>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<h3>Do you smell what The Rock is cooking?</h3>
<input type='text'>
<button id='check' class="input">Check answer</button>
<p id='resultQ2'></p>
</div>
</div>
</body>
The correct event name is "DOMContentLoaded". You are writting "DomContentLoaded".
I updated your js code with some changes and comments. I've tested here and now it works.
//How you use it in more than one function Define it as a global var
let incorrects, correct;
function Q1correct() {
correct.style.backgroundColor = 'green';
document.querySelector('#resultQ1').innerHTML = 'Correct!';
}
function Q1wrong() {
for (let i = 0; i < incorrects.length; i++) {
incorrects[i].style.backgroundColor = 'red';
document.querySelector('#resultQ1').innerHTML = 'Wrong :(';
}
}
function Q2() {
if (secondQ.value.toLowerCase() == "yes") {
secondQ.style.backgroundColor = 'green';
document.querySelector('#resultQ2').innerHTML = 'Correct!';
}
else {
secondQ.style.backgroundColor = 'red';
document.querySelector('#resultQ2').innerHTML = 'Wrong :(';
}
}
document.addEventListener('DOMContentLoaded', function () {
correct = document.querySelector('.correct');
correct.addEventListener('click', Q1correct);
//querySelectorAll returns an array, so we need to loop into it
incorrects = document.querySelectorAll('.incorrect');
incorrects.forEach(btn => {
btn.addEventListener('click', Q1wrong)
})
let secondQ = document.querySelector('#check');
secondQ.addEventListener('click', Q2);
});
First of all you have a typo 'DOMContentLoaded'.
Also you need to attach event listener to an individual item. Instead you've attached the click listener to an NodeLists which won't work.
Also you've declared some variable inside DOMContentLoaded and used them inside other function. Which of course won't work because of functional scoping.
You can check this working code to get some idea.
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>What is Dwayne "The Rock" Johnson's real middle name? </h3>
<button class='incorrect'>Johnsons</button>
<button class='incorrect'>Pebble</button>
<button class='correct'>Douglas</button>
<button class='incorrect'>Teetsy</button>
<button class='incorrect'>Lewis</button>
<p id='resultQ1'></p>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<h3>Do you smell what The Rock is cooking?</h3>
<input type='text' id="secondValue">
<button id='check' class="input">Check answer</button>
<p id='resultQ2'></p>
</div>
</div>
<script>
function Q1correct() {
let correct = document.querySelector('.correct');
correct.style.backgroundColor = 'green';
document.querySelector('#resultQ1').innerHTML = 'Correct!';
}
function Q1wrong() {
this.style.backgroundColor = 'red';
document.querySelector('#resultQ1').innerHTML = 'Wrong :(';
}
function Q2() {
const secondValue = document.querySelector('#secondValue');
const secondQ = document.querySelector('#check');
if (secondValue.value.toLowerCase() == "yes") {
secondQ.style.backgroundColor = 'green';
document.querySelector('#resultQ2').innerHTML = 'Correct!';
}
else {
secondQ.style.backgroundColor = 'red';
document.querySelector('#resultQ2').innerHTML = 'Wrong :(';
}
}
document.addEventListener('DOMContentLoaded', function() {
let correct = document.querySelector('.correct');
correct.addEventListener('click', Q1correct);
let incorrects = document.querySelectorAll('.incorrect');
incorrects.forEach(incorrect => incorrect.addEventListener('click', Q1wrong))
let secondQ = document.querySelector('#check');
secondQ.addEventListener('click', Q2);
});
</script>
</body>
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.
Here is part of my html layout (with sciter framework):
<div id="volume_micphone_slider" style="z-index:1;">
<input id="volume_slider" class="volume_slider" type="vslider" name="p1c" max="100" value="20" buddy="p1c-buddy" />
</div>
<div>
<button id="volume_show" class="volume_show" ></button>
<button id="micphone_show" class="micphone_show"></button>
</div>
Here is my onClick() method of the Button(use tiscript):
var volume_flag=1;
function volume_ctrl()
{
if(volume_flag)
{
$(#volume_slider).style#display ="none";
volume_flag=0;
}
else
{
$(#volume_slider).style#display ="inline-block";
volume_flag=1;
}
}
$(#volume_show).onClick = function()
{
volume_ctrl();
}
But this method can't be useful.Please help me to figure out my problem.Thanks.
Multiple problems in your code as explained inline
var volume_flag=1;
function volume_ctrl()
{
if(volume_flag)
{
$("#volume_slider").style.display ="none"; //selector in quotes and . before style
volume_flag=0;
}
else
{
$("#volume_slider").style.display ="inline-block";
volume_flag=1;
}
}
$("#volume_show").onclick = function() //small c instead of C in onclick
{
volume_ctrl();
}
it is pure javascript code
var volume_flag = 1;
function volume_ctrl() {
if (volume_flag) {
document.getElementById('volume_slider').style.display = "none";
volume_flag = 0;
} else {
document.getElementById('volume_slider').style.display = "inline-block";
volume_flag = 1;
}
}
document.getElementById('volume_show').addEventListener("click", function() {
volume_ctrl();
})
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>
I have this bit of code that is working in FF, Chrome, Safari, and even IE9. Naturally, it doesn't work in IE8. It's a show/hide on two divs using Javascript. I'm not terribly proficient with JS so any help would be appreciated.
Javascript function :
function showonlyone(thechosenone) {
var subscriberinfo = document.getElementsByTagName("div");
for(var x=0; x<subscriberinfo.length; x++) {
name = subscriberinfo[x].getAttribute("class");
if (name == 'subscriberinfo') {
if (subscriberinfo[x].id == thechosenone) {
subscriberinfo[x].style.display = 'block';
} else {
subscriberinfo[x].style.display = 'none';
}
}
}
}
HTML code :
<ul class="options">
<div class="subscriber-options">
<a href="javascript:showonlyone('subscriberinfo1');" >Account</a>
</div>
<div class="subscriber-options">
<a href="javascript:showonlyone('subscriberinfo2');" >Subscriber Options</a>
</div>
</ul>
<!-- options -->
<div class="subscriberinfo" id="subscriberinfo1">Div #1</div>
<!-- subscriberinfo1 -->
<div class="subscriberinfo" id="subscriberinfo2" style="display: none;">Div #2</div>
Instead of getAttribute("class") have you tried className?
function showonlyone(thechosenone) {
var subscriberinfo = document.getElementsByTagName("div");
for(var x=0; x<subscriberinfo.length; x++) {
name = subscriberinfo[x].className; // <-- Here is the change
if (name == 'subscriberinfo') {
subscriberinfo[x].style.display =
(subscriberinfo[x].id == thechosenone) ? 'block' : 'none';
}
}
}