I need help. I want elements to be shown when clicking on their siblings. I want to do this stuff with pure javascript.
When I run my code and I click on the neither nothing happens nor errors are shown in the browser console (Chrome and Firefox).
I think one problem could be the onclick event inside de window.onload function, but I don't find the way to fix it.
Here's my HTML code:
<div class="year_element">
<h3 class="year">2015</h3>
<ul class="hide_months months">
<li>Marzo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1998</h3>
<ul class="hide_months months">
<li>Mayo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1987</h3>
<ul class="hide_months months">
</ul>
</div>
And here's my JavaScript code:
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i += 1) {
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
Your answers telling me the code worked, gave me the key of the problem: another file js was executing a window.onload function so this one didn't work. This has been fixed by using.
window.addEventListener("load", one_function, false);
window.addEventListener("load", another_function, false);
Thanks.
Are you running your javascript correctly?
I pasted everything into a html file, and the click seems to work.
It adds and removes the hide_months class. I don't have your css to make Marzo/Mayo dissapear, but looks like the loading and clicking are working as expected.
<script type="text/javascript">
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i += 1) {
console.log('found some elements');
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
</script>
Hm I try your example and it work fine in chroma.
I just add CSS that should work for this purpose.
<html>
<body>
<div class="year_element">
<h3 class="year">2015</h3>
<ul class="hide_months months">
<li>Marzo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1998</h3>
<ul class="hide_months months">
<li>Mayo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1987</h3>
<ul class="hide_months months">
</ul>
</div>
<script>
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i++) {
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
</script>
<style>
.year_element{font-weight: normal;}
.year{font-weight: bold; cursor: pointer;}
.months{color: green;}
.hide_months{display: none;}
</style>
</body>
</html>
Related
I want the count to increase in the navbar for every time the "add to cart" button is clicked on an item, but I can't see why my code isn't working, when I click add to cart button currently the counter does not increase. If anyone could tell me what I'm missing or give me a better solution to what I have I'd appreciate it, thanks!
$('.addCart').on('click', function() {
console.log(completedIncrements.indexOf(this.id));
if (completedIncrements.indexOf(this.id) == -1) {
var count = parseInt($("#count").text());
$("#count").html(count + 1);
completedIncrements.push(this.id);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
Shopping Cart (<span id="count">0</span>)
Shop
Contact Us
</div>
<a href="shoe1.html"><img id="shoe3" img src="images/shoe1.jpg" alt="shoe1">
<div id="cart1" class="addCart" href="#"><button>Add to cart</button></div>
<a href="shoe2.html"><img id="shoe4" img src="images/shoe2.jpg" alt="shoe2">
<div id="cart2" class="addCart" href="#"><button>Add to cart</button></div>
I just checked your code. The completeIncrements is throwing error in the console and preventing the execution of your logic. Please give information about that or else use the code below to solve it.
$('.addCart').on('click', function() {
var count = parseInt($("#count").text());
$("#count").html(count + 1);
})
$('.addCart').on('click', function(e) {
e.preventDefault();
var completedIncrements =0;
var count = parseInt($("#count").text());
$("#count").html(count + 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
Shopping Cart (<span id="count">0</span>)
Shop
Contact Us
</div>
<a href="shoe1.html"><img id="shoe3" img src="images/shoe1.jpg" alt="shoe1">
<div id="cart1" class="addCart" href="#"><button>Add to cart</button></div>
<a href="shoe2.html"><img id="shoe4" img src="images/shoe2.jpg" alt="shoe2">
<div id="cart2" class="addCart" href="#"><button>Add to cart</button></div>
Use prevent default function so that link should not be refreshed and also removed unnecessary code
$('.addCart').on('click', function(e) {
e.preventDefault();
var count = parseInt($("#count").text());
$("#count").html(count + 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here is the concept of my content being shown/hidden. It also works.
https://jsfiddle.net/mplungjan/a7Lfjsgh/
It works in the small html code above. However, it does not work when I apply it to my larger HTML code. Does someone know why?
My goal is to have many list items with spans attached to the reveal answers button.
HTML:
<nav class="Rightbox" id="RightFrench">
<div id="Stage1">
<h1>Stage 1</h1>
<h5> <span class="HighlightBlue">Exercise 1 - </span></h5>
<h5><button class="AnswerTitle" id="AnswersFrenchStage1Ex1">Reveal Answers</button></h5>
<p class="Task">
<span class="HighlightBlue">Translate the following</span>
</p>
<ul>
<li>
<p> the passeport <textarea></textarea>
<span class="FrenchStage1Ex1">la passeport</span>
</p>
</li>
<li>
<p>the passeport <textarea></textarea>
<span class="FrenchStage1Ex1">la passeport</span>
</p>
</li>
</div>
</nav>
Javascript:
window.onload = function() {
var buttons = document.querySelectorAll(".AnswerTitle");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
var id = this.id.replace(/reveal/, "FrenchStage");
var answers = document.querySelectorAll("." + id);
for (var i = 0; i < answers.length; i++) {
answers[i].style.display = answers[i].style.display == "inline" ? "none" : "inline";
}
}
}
}
CSS:
.Rightbox ul li p span {display:none;}
the problem turns out to be I changed the id of the button, thinking that the javascript was not using the button id. turns out the
var id = this.id.replace(/reveal/, "FrenchStage")
really wanted the button to have an ID containing "reveal"
This code is supposed to be looping and adding multiple divs, but it isn't working. When I click it, only one div appears. If I click again, nothing happens.
<body>
<div class="start" >
<div id = "coba">
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function () {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Thanks for your help
Your code does not work because you did not do anything with the variable "i" in the for statement. If you look at the fiddles of user2181397 & meghan Armes you will see how they added a line in the script to put it to work.
I tested the below in my IDE and it works just fine:
<body>
<div class="start" style="margin-top:50px; color:black;">
<div id = "coba">
<p>Click Me</p>
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function() {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
di.innerHTML=i;
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Anyone can tell me why even though by debugging with fireBug the script correctly finds the proper element, the style.display doesn't update the property of the ul which remains set to none?
<html>
<div id="nav">
<ul>
<li>Studio
</li>
</ul>
</div>
<div id="subnav1">
<ul style="display: none">
<li>normally hidden
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
function show()
{
var subNav1 = document.getElementById("subnav1");
var ull = subNav1.getElementsByTagName("ul");
for (var i = 0, ii = ull.length; i < ii; i++)
{
if(ull[i].style.display == "visible")
{
ull[i].style.display = "none";
}
else
{
ull[i].style.display = "visible";
}
}
};
</script>
</html>
"visible" is not a valid css display value. I think you are looking for "block"
I have Javascript tabs which show/hide divs instead of loading new pages. The tabs have a style which gives a hover effect. I now want to add an active style to match up with the curently visible div.
THE JAVASCRIPT, which does not work as it is from a version which loads pages:
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i < aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href) >= 0) {
aObj[i].className='active';
}
}
}
function showdiv(id){
document.getElementById(id).style.display = "block";
}
function hidediv(id){
document.getElementById(id).style.display = "none";
}
THE STYLE:
#pageAdmin { display:block; }
#userAdmin { display:none; }
THE HTML:
<ul id="nav">
<li><a onclick="showdiv('pageAdmin'); hidediv('userAdmin')"
href="#">Page Admin</a></li>
<li><a onclick="showdiv('userAdmin'); hidediv('pageAdmin')"
href="#">User Admin</a></li>
</ul>
<div id="pageAdmin">
<h1>Page admin</h1>
</div>
<div id="userAdmin">
<h1>User admin</h1>
</div>
This is my first question on SO, so I hope it is appropriate - please accept my apologies in advance if it is not!
Your setActive function isn't very helpful. And using location, href and hash it will be hard doing what you want.
You may change your script to
function showdiv(id){
var el = document.getElementById(id);
el.style.display = "block";
el.className = "active";
}
function hidediv(id){
var el = document.getElementById(id);
el.style.display = "none";
el.className = "";
}
Now it should do what you want.
However, you should take a look on jQuery.
Using jQuery you do eliminate the use of getElementById and you can much simpler attach an eventhandler for onclick's, as by using vanilla js. It is considered as bad practice to setup handlers in html attributes.
jQuery also handles you the splitting and joining the space separated className string, if you want to use multiple styles.
Using jQuery it looks like:
$("a", "#nav").click(function () {
var $navA = $(this);
var tabName = $navA.attr("data-tabName");
$(".tab").each(function () {
var $tab = $(this);
if ($tab.attr("id") === tabName) {
$tab.css({ display: 'block' }); // you may move this into active style
$tab.addClass("active");
$tab.removeClass("inactive");
}
else {
$tab.css({ display: 'none' }); // you may move this into inactive style
$tab.removeClass("active");
$tab.addClass("inactive");
}
});
});
The HTML for the jQuery example
<ul id="nav">
<li><a data-tabName="pageAdmin" href="#">Page Admin</a></li>
<li><a data-tabName="userAdmin" href="#">User Admin</a></li>
</ul>
<div class="tab" id="pageAdmin">
<h1>Page admin</h1>
</div>
<div class="tab" id="userAdmin">
<h1>User admin</h1>
</div>