Javascript onClick doesn't work unless clicked twice - javascript

I've got this Javascript that opens up a table to reveal the bottom rows. Unfortunately when the page loads the button that opens the table won't work until it has been clicked twice. After that it works with one click, unless the user has refreshed the page, and then it's back to a two click start.
I've got this in the header:
<script type="text/javascript">
var rowVisible = true;
function toggleDisplay(tbl) {
var tblRows = tbl.rows;
var i;
for (i = 0; i < tblRows.length; i++) {
if (tblRows[i].className != "headerRow") {
tblRows[i].style.display = (rowVisible) ? "none" : "";
}
}
rowVisible = !rowVisible;
}
</script>
And this on the button
<a class="small blue btn" onClick="toggleDisplay('.$thread_no.')" >
<small>Open</small></th>
How can I get this to work with just one click every time?

I think the problem might be related to the a element. The second time you click the hyperlink the empty hash is triggered so it does not trigger a second time.
You can prevent the default action or you use another element by returning false or e.preventDefault();

Related

Javascript click on specific element always uses wrong/other element id

I have several html pages and each one has a varying number of buttons that appear based on the page's content.
In just Javascript (since I don't use jquery), I am trying to have the same few lines of code apply to the respective button that was clicked, with the exception that the id tag has to be 'concatenated' into a variable based on the respective button that was clicked.
I saw other solutions on here that cycled through the elements of the class (in this case the "zoom_buttonClass"). However, when I attempt this, regardless of number of buttons on the page or which button was clicked, it is always the LAST button in the list that seems to be the one seen as clicked.
I need to always check if buttons are clicked, but how do I apply the actions based on the ACTUAL button that was clicked?
My HTML and JS code snippets are below:
Thanks in advance.
HTML code:
<div class="modalClass" id="myModalID">
<span class="closeModalClass" aria-label="Close Photo Enlargement Modal Box">×</span>
<img class="modal_contentClass" id="modalEnlargementID">
</div>
<div id="captionID"></div>
JS code:
for (var i = 0;i < document.getElementsByClassName("zoom_buttonClass").length;i++){
document.getElementsByClassName("zoom_buttonClass")[i].addEventListener('click', myFunction
(var attribute = this.getAttribute("id");
var photoIDstring = "photo"+counterX+"ID";
document.getElementById('myModalID').style.display = "block";
document.getElementById('captionID').style.display = "block";
document.getElementById("modalEnlargementID").src = document.getElementById(photoIDstring).src;
captionText.innerText = document.getElementById(photoIDstring).alt;
), false);
};
Well, I started again and I think I may have hit upon a solution. It seems to work.
var captionText = document.getElementById("captionID");
var howManyButtons = document.getElementsByClassName("zoom_buttonClass").length;
var buttonCollection = document.getElementsByClassName("zoom_buttonClass");
for (let i=0; i < howManyButtons; i++) {
buttonCollection[i].onclick = function() {
let photoIDstring = "photo"+(i+1)+"ID";
document.getElementById('myModalID').style.display = "block";
document.getElementById('captionID').style.display = "block";
document.getElementById("modalEnlargementID").src = document.getElementById(photoIDstring).src;
captionText.innerText = document.getElementById(photoIDstring).alt;
}
}

javascript function loses ability to toggle

Using this script to open 1 of multiple menus based on the target ID. The class is .dropdownDiv. The script starts by removing the "show" class from any .dropdownDiv's, then allowing the user to toggle the targeted .dropdownDiv.
The issue is, the .remove and .toggle don't appear to work together. They work individually just fine. I can toggle one div show-unshow all day long, but clicking the other buttons will not control it. I can do the reverse and have one button remove the div from another, but then the targeting button will not remove it's own div.
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
var divs = document.querySelectorAll('.navButton');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', showDropDown);
}
});
function showDropDown() {
//un-show all dropdowns
var containers = document.querySelectorAll('.dropdownDiv');
for (var i = 0; i < containers.length; i++) {
containers[i].classList.remove('show');
}
// show targeted dropdown only
var d = document.getElementById(event.target.dataset.target);
d.classList.toggle("show");
console.log(d);
}
</script>
a trivial way to toggle something, that is using a flag and flip it each time you hit an action, so you can do something like so:
if(a)
{//something to do}
else
{// another action to do}
a = ! a;
so, you can remove the clicked drop down instead of removing all drop down classes.

no triggering on click event

This is a simple but intersting issue. Suppose I have two sections of respective class .toggle0 and .toggle1, suppose I want to display .toggle0 and hide .toggle1 when clicking on some tag .footer0, and vice-versa : I want to display .toggle1 and hide .toggle0 when clicking on some tag .footer1. Now this code works correctly
$('.toggle1').hide();
var i=0;
$(".footer"+i+"").click(function(){
$(".toggle"+(i+1) %2+"").hide();
$(".toggle"+i+"").show();
});
var j=1;
$(".footer"+j+"").click(function(){
$(".toggle"+(j+1) %2+"").hide();
$(".toggle"+j+"").show();
});
but this doesn't work in the sense that nothing happens on click event
for(var i=0;i<2;i++){
$(".footer"+i+"").click(function(){
$(".toggle"+(i+1) %2+"").hide();
$(".toggle"+i+"").show();
});
}
if I put this
$('.toggle1').hide();
var i=0;
$(".footer"+i+"").click(function(){
$(".toggle"+(i+1) %2+"").hide();
$(".toggle"+i+"").show();
});
i =1;
$(".footer"+i+"").click(function(){
$(".toggle"+(i+1) %2+"").hide();
$(".toggle"+i+"").show();
});
.toggle1 displays and .toggle0 hides when clicking on some tag .footer1 but .toggle0 does not display and .toggle1 does not hide when clicking on some tag .footer0 . It seems that the second click event takes precedence upon the first
The i within the the click handler isn't evaluated until a click, at which point the value has changed from when the handler was bound. If you want to go this route, you need to create a closure. Here's one method to do so:
for (var i = 0; i < 2; i++) {
$(".footer" + i + "").click(function () {
var idx = i;
return function () {
$(".toggle"+(idx+1) %2+"").hide();
$(".toggle"+idx+"").show();
console.log(idx);
}
}());
}
$('.footer0').click(function(){
$('.toggle0 .toggle1').hide();
$('.toggle0').show();
});
$('.footer1').click(function(){
$('.toggle0 .toggle1').hide();
$('.toggle1').show();
});

JavaScript - Toggle function

Im trying to hide/show a JS function I have defined in a chrome extension.
What I have so far:
The span classes I am trying to hide are label:
dspan.className = "cExtension";
//Create toggle button:
function createToggleButton(){
var toggleButton = document.createElement("button");
toggleButton.innerHTML = "Toggle Overlay";
toggleButton.id = "Toggle"
var header = document.getElementById("header");
header.appendChild(toggleButton);
toggleExtension();
}
// find all spans and toggle display:
function toggleExtension(){
var spans = document.getElementsByTagName('span');
var toggle = function() {
for (var i = 0, l = spans.length; i < l; i++) {
if (spans[i].getAttribute('class') == 'cExtension')
if (spans[i].style.display == 'none') spans[i].style.display = '';
else spans[i].style.display = 'none';
}
}
document.getElementById('Toggle').onclick = toggle;
}
The button shows on the header, however it is unclickable. If I change document.getElementById('Toggle').onclick = toggle; to document.getElementById('Toggle').onclick = alert{"Hello"); the alert is triggered on page load on not onclick. I am trying to get this done in pure JS. Where am I going wrong?
First of all, document.getElementById("Toggle").onclick = alert("Hello"); will set the onclick event to whatever the alert function returns, not the alert function itself. So the alert function happens at page load so it can figure out what to return. So you could do this: document.getElementById("Toggle").onclick = function(){alert("Hello");}; and that might work.
Edit: Scratch everything that was here: I missed that toggle variable set to a function in toggleExtension.
I haven't tested all this so I can't guarantee that it'll all work in your specific case.
if visible is set remove it, otherwise add it
div.classList.toggle("visible");
add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
Make sure browser support: http://caniuse.com/#feat=classlist
Why not use jQuery?
It will do all hard job for you.
http://api.jquery.com/toggle/
Cheers!

how do i use slidetoggle and allow only one div open at a time?

Code: http://codepen.io/anon/pen/sumIx
$('.module article').hide();
});
$('.module-content, .module-photo').click(function() {
for (var i = 0; i < 5; i++) {
$('.module article').slideUp();
} $(this).parent().children('article').slideToggle('slow');
});
If you click on any of the boxes, the previously active div closes as expected.
When you try to close the same div which is active, it opens right back up. How do I keep everything else the same but correct the behavior so that it doesn't reopen?
Try this:
$('.module-content').click(function() {
var $this = $(this).closest('section').find('article');
$('.module article').not($this).slideUp();
$this.slideToggle('slow');
});
http://codepen.io/anon/pen/DBirp
jQuery iterates element collections naturally so your loops are irrelevant in this case. Here's the commented updated code:
$('.module-content').click(function() {
//stores a reference to the clicked section's article
var article = $(this).parent().children('article');
//hides all other articles
$('.module article').not(article).slideUp();
//toggles the clicked one
article.slideToggle('slow');
});
http://codepen.io/anon/pen/dgJDr

Categories