This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 9 years ago.
I have a php page with spoilers in wich I use javascript to view or hide the spoilers. This is done by changing classes on the span of each spoiler div (.hidden, .visible). The classes are s1, a1, s2, a2, s3, a3 etc.
I want to select each spoiler and give them an onclick function to view or hide the answer of the clicked spoiler. This can be done which variables in a for loop. I am getting no errors in Chrome debugger, but the classes won't change.
It works fine without the for loop.
This is a part of my php:
<div class="spoiler">
Is this a second question
View answer
<span id="a1" class="hidden">Yes it is</span>
<hr />
</div>
<div class="spoiler">
Is this a second question
View answer
<span id="a2" class="hidden">Yes it is</span>
<hr />
</div>
This is my javascript using jquery:
window.onload = function () {
for (var i = 1; i < 2; i++) {
var s = [];
s[i] = document.getElementById("s" + i);
s[i].addEventListener("click", function () {
var a = [];
a[i] = document.getElementById("a" + i);
if ($("a" + i).hasClass("hidden")) {
$("a" + i).removeClass("hidden");
$("a" + i).addClass("visible");
$("a" + i).html("Hide answer");
} else if ($("a" + i).hasClass("visible")) {
$("a" + i).removeClass("visible");
$("a" + i).addClass("hidden");
$("a" + i).html("View answer");
}
}, true);
};
}
Thanks for the help!
In your case just use $(this).next('span') instead of $("a" + i). Because this in your handler represents the current element clicked on and you want to select the anchor next to it, so you don't have to create the selector. Also the actual reason being, you are using the i as a shared variable inside your handler which would have run to the last value of the iteration by the time your handler gets invoked. Plus you have duplicate ids in your html which will select only the first item matching the selector.
Try:
window.onload = function () {
for (var i = 1; i <= 2; i++) {
var s = document.getElementById("s" + i);
s.addEventListener("click", function () {
var $this = $(this).next('span'), // or do $('#' + this.id.replace("a",""));
msg = "View answer";
$this.toggleClass("hidden visible")
if ($this.hasClass("hidden")) {
msg = "Hide answer";
}
$this.html(msg);
}, true);
};
}
Demo
Binding the event with jquery:
$(function(){
$('.spoiler [id^="s"]').click(function () {
var $this = $(this).next('span'),
msg = "View answer";
$this.toggleClass("hidden visible")
if ($this.hasClass("hidden")) {
msg = "Hide answer";
}
$this.html(msg);
});
});
Related
I have a function in a javascript file that adds a link to a paragraph that I created in the HTML file. I want to call a function that is defined in the javascript file when the user clicks the link.
My HTML:
<p id="para"></p>
My JavaScript:
var paraHTML = document.getElementById("para");
function addLink(id) {
paraHTML.innerHTML += '<a id="' + id + '" onclick="clickedTest(); return false;">Click me!</a>'
}
function clickedTest() {
console.log('here');
}
I have also tried using href e.g.
paraHTML.innerHTML += '<a id="' + id + '" href="javascricpt:clickedTest();">Click me!</a>'
But both ways give me an error saying: ReferenceError: clickedTest is not defined
I have tried using the following code from this question but the number of links is constantly changing whilst my code is running which makes it difficult to use:
var elements = document.getElementsByTagName('a');
for(var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function () {
console.log('here')
}
}
The addLink() function is called elsewhere in my javascript program several times
Using innerHTML to create content is usually slow and is usually discouraged, a more organic approach will be to create the element pragmatically and then adding event listener to that element. For example,
var elem = document.createElement('a');
elem.addEventListener('click', myClickHandler);
elem.innerText = 'My Tag';
paraHTML.appendChild(elem)
function myClickHandler(e) {
console.log('a is clicked')
}
This will not only fix your problem but will make your code more manageable
You can do something like this:
function callMe(){
}
var newLink = document.createElement('a');
newLink.href="javascript:callMe();";
newLink.innerHTML="this is a link";
paraHTML.appendChild(newLink);
I am trying to make a little idle click game, but have a problem with my startIdle function.
I can't pass the id to which input progressbar that is needed to start counting.
I have one input field and one button foreach id from a obj.
function addRow(id) {
var div = document.createElement('div');
div.className = 'row';
div.innerHTML =
'<div class="w3-blue" name="idle" id="'+id+'" style="height:24px;width:20%"></div>\
<button onclick="startIdle('+id+')">Click me</button>';
document.getElementById('content').appendChild(div);
}
function startIdle(id) {
_counter = 1;
_timer = setInterval(function(){
document.getElementById(id).style.width = (_counter + "%");
_counter++;
if(_counter > 100) clearInterval(_timer);
}, 100);
}
function createIdles(){
for (var key in money) {
// skip loop if the property is from prototype
if (!money.hasOwnProperty(key)) continue;
var obj = money[key].id;
addRow(obj)
}
}
createIdles()
this is the console.log I get:
Uncaught ReferenceError: startIdle is not defined at HTMLButtonElement.onclick
Your problem is that startIdle is defined inside a scope. Move it out of document.ready. Unless you can call the function from console, it isn't available globally.
Alternatively, building on Andy Hoffmans solution, bind onClick programmatically inside scope of document.ready, e.g.
document.querySelectorAll('button[data-id]')
.forEach(elm => elm.addEventListener('click',
() => startIdle(elm.dataset.id)))
You can probably improve that a bit using jquery.
I removed the onclick attribute and perform binding separately. The binding and element lookup are done inside of a setTimeout to ensure the elements are present in the DOM when that code runs.
// Note: I'm using a data-id attribute on the <button> so as to not
// duplicate the id on the <div class="w-3">
function addRow(id) {
var div = document.createElement('div');
div.className = 'row';
div.innerHTML =
'<div class="w3-blue" name="idle" id="' + id + '" style="height:24px;width:20%"></div>\
<button data-id="' + id + '">Click me</button>';
document.getElementById('content').appendChild(div);
}
function startIdle() {
// Remember the data-id attribute from above?
alert('clicked ' + this.getAttribute('data-id'));
}
for (var i = 0; i < 5; i++) {
addRow(i);
}
// Bind click events in separate event loop to ensure elements are present in DOM
setTimeout(function() {
var els = document.querySelectorAll("button[data-id]");
els.forEach(function(el) {
el.addEventListener("click", startIdle);
})
});
<div id="content"></div>
http://jsfiddle.net/4mr02ktu/2/
var x=0;
$(document).ready(function() {
$("div button").on("click", function(event) {
x = $(this).html();
}) ;
}) ;
console.log(x);
I have 5 buttons inside a div element I want the value of fhe button on click whrn they clicked by assigning it to a variable at outside of the function.
So.. Erm.. What you want to do is.. When Button X is clicked, you want to use the X value as an Index in Arr[X] to display the contens of that in the LST block?
Since you are pulling the data as html, which is like a string of sorts, you need to do a cast to int first before using it as such, I guess.
It would probably be better to add the value as a property so you can write something else than a number on the button..
And don't forget that arrays count from 0, and your buttons count from 1, so you would need to subtract 1 to get the first element of arr. Or you could just add an empty element to your arr like:
var arr = [{rId:0, hNo:""}, ...
// In which case you wouldn't need to subtract 1.
In any case on point with your current line, it would be:
$('div button').click(function (event) {
var x = parseInt($(this).html()) - 1;
$('#lst').html(arr[x].rId + " " + arr[x].hNo);
});
If you were going to use the value of button it would be like:
HTML:
<button value='1'>Click this amazing button that blows your mind..</button>
Script:
$('div button').click(function () {
var x = $(this).val();
$('#lst').html(arr[x].rId + " " + arr[x].hNo);
});
If I got you right, that is.
When you correct all the small spelling errors then code actually works fine, as you can see I've moved the console.log(x) inside your function so you can actually see that x is being set.
Var x=0; => var x=0;
$document. Ready(function() { => $(document).ready(function() {
$("div button"). On("click", function(event) { => $("div button").on("click", function(event) {
Console.log(x); => console.log(x);
var x = 0;
$(document).ready(function() {
$("div button").on("click", function(event) {
x = $(this).html();
console.log(x);
});
});
Note: if you are having problems getting the value of x outside the click function, then you need to provide us with more information about what you want to do with it or show us more of your jquery code.
demo
var x = 0;
var arr = [{rId: 1,hNo:"A31"},{rId: 2,hNo:"A32"},{rId: 2,hNo:"A33"}]
$(document).ready(function() {
$("div button").on("click", function(event) {
x = $(this).text().replace("button","");
document.getElementById("First").innerHTML = arr[x] != undefined ? arr[x].rId + " " + arr[x].hNo : "";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<button>button5</button>
</div>
<div id="First"></div>
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 7 years ago.
I'm using a plugin that uses jQuery(document).on() to activate a modal. I have a bunch of modals on the page.
If I manually create an .on for each modal opening/closing everything works as
jQuery(document).on('opened', '[data-remodal-id=modal-1]',
function() {
player1.api('play')
});
jQuery(document).on('closed', '[data-remodal-id=modal-1]',
function(e) {
player1.api('unload')
});
jQuery(document).on('opened', '[data-remodal-id=modal-2]',
function() {
player2.api('play');
});
jQuery(document).on('closed', '[data-remodal-id=modal-2]',
function(e) {
player2.api('unload');
});
However this is a managed page, that could need 2,3 or 10 modals with their own content. I'm trying to do what I did above, only dynamically. Here's my attempt, and I can see why it doesn't work, but I have no idea how to approach this properly.
var countPlusOne;
for (i=0;i<players.length;i++){
countPlusOne=i+1;
var dataSelector = '[data-remodal-id=modal-'+countPlusOne+']';
jQuery(document).on('opened', dataSelector, function () {
players[i].api('play');
});
jQuery(document).on('closed', dataSelector, function (e) {
players[i].api('unload');
});
}
Hopefully it gives you some idea of what i'm trying to do? Is it even possible?
Per my understanding, you have dynamic elements and have to bind events to them.
You can try something like this:
var count = 1;
function addInput(){
var content = document.getElementById("content");
var input = "<input id='txt_"+count+"' class='input'>";
count++;
content.innerHTML+=input;
}
function registerEvents(){
$(document).on("blur", ".input", function(){
console.log($(this).attr("id"));
})
}
registerEvents();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="content"></div>
<button onclick="addInput()">Add input</button>
If playerX are global vars, you could refactorize your code to this:
jQuery(document).on('opened closed', '[data-remodal-id]', function (e) {
window["player" + $(this).data("remodalId").replace('modal-' ,'')].api(e.type === "opened" ? 'play' : 'unload');
});
But i guess you don't need all this different playerX variables anyway.
Ultimately, your api() should handle player id and it would be called like that e.g:
player.api(1, 'play');
EDIT: Ok i'm miss this part in OP
I'm using a plugin
So you shouldn't override api() method.
EDIT2: to answer your question, using closure, you could use:
var countPlusOne;
for (i = 0; i < players.length; i++) {
(function(i) {
countPlusOne = i + 1;
var dataSelector = '[data-remodal-id=modal-' + countPlusOne + ']';
jQuery(document).on('opened', dataSelector, function() {
players[i].api('play');
});
jQuery(document).on('closed', dataSelector, function(e) {
players[i].api('unload');
});
})(i);
}
I am trying to fill an array with strings, the elements that will be added are the HTML of the clicked <\li>, im probably filling it correctly.
My problem is when the user clicks on the checked link again, i want to remove this item from the array
Here is a code sample:
$(document).ready(function(){
var chosen = [];
var chosenCounter = 0;
find("ul").find("li").click(function(){
var checkBox = $(this).find("img").first();
var checkBoxSrc = checkBox.attr("src");
if(checkBoxSrc == "images/unchecked.png"){
checkBoxSrc = "images/checked.png";
checkBox.attr("src",checkBoxSrc);
checkBox = "";
checkBoxSrc = "";
var temp = this.outerHTML;
chosen[chosenCounter] = temp;
chosenCounter ++;
}
if(checkBoxSrc == "images/checked.png"){
checkBoxSrc = "images/unchecked.png";
checkBox.attr("src",checkBoxSrc);
checkBox = "";
checkBoxSrc = "";
for (var j =0; j<=chosen.length; j++){
var tempRemove = this.outerHTML;
chosen.splice( chosen.indexOf( tempRemove ), 1 );
tempRemove = '';
}
}
});
});
I have been trying all functions and ways i found on internet .. but the results doesn't works well, i would be very thankful for a correction and explanation.
Thanks all in advance.
I've gone through an rewritten the code to work much better. There were a number of issues but here is the fixed version that I tested.
Your original code had an if statement and then another if statement. You needed an if and then an else if.
Notice when finding the child element I just use $('img', this) instead of the find operator and first().
Use ID instead of HTML
For debugging there is a console.log statement in there. Remove this so it works in IE.
To add an element to an array use push
No need to loop over splice to remove the item. Just call splice once.
$(document).ready(function () {
var chosenIDs = [];
$("ul li").click(function () {
var checkBox = $('img', this);
var checkBoxSrc = checkBox.attr("src");
var id = $(this).attr('data-id');
console.log(id + ' ' + chosenIDs.length + ' ' + checkBoxSrc);
if (checkBoxSrc == "images/unchecked.png") {
checkBoxSrc = "images/checked.png";
checkBox.attr("src", checkBoxSrc);
chosenIDs.push(id);
}
else if (checkBoxSrc == "images/checked.png") {
checkBoxSrc = "images/unchecked.png";
checkBox.attr("src", checkBoxSrc);
chosenIDs.splice(chosenIDs.indexOf(id), 1);
}
});
});