This question already has answers here:
Adding an onclick function to go to url in JavaScript?
(9 answers)
Closed 9 years ago.
I want to open a URL when the following is clicked:
<span class="taglib-text">Forgot Password</span>
Can anybody provide me with its Javascript?
Actually, I cannot control the HTML that's why I need to call an event using Javascript and class name i.e. taglib-text
Try this:
var url = 'http://www.google.com';
var element = document.getElementsByClassName('taglib-text')[0]; // only targets the first element it finds
element.addEventListener('click',function(){
location.href = url;
});
If you have many elements with that class you can instead use:
var url = 'http://www.google.com';
var elements = document.getElementsByClassName('taglib-text');
for (var i = 0; i < elements.length; i++){
elements[i].addEventListener('click', function () {
location.href = url;
});
}
FIDDLE
I changed my answer from using .querySelector() to .getElementsByClassName() because of Shawn's comment and this test
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Javascript infamous Loop issue? [duplicate]
(5 answers)
Closed 2 years ago.
I'm trying to assign the "onclick" for a javascript generated <a> element to some function, loadfunction(project[j].getName(), project[j].getPath()).
var projects = []; //Some array of classes in it
function loadProject(aName, aPath){
//does some stuff
}
var j;
for(j = 0; j < projects.length; j++){
var div = document.createElement("div");
var a = document.createElement("a");
var linkText = document.createTextNode(projects[j]);
a.appendChild(linkText);
a.title = projects[j].getName();
a.href = "AProject.html";
a.onclick = function(){loadProject(projects[j].getName(), projects[j].getPath());};
div.appendChild(a)
div.classList.add("project");
document.getElementById("projcontainer").appendChild(div)
}
Ideally, this should set the onclick to call loadProject() with a defined parameter. The elements are generated, but they are not assigned any onclick function and I can't figure out why. Any help would be appreciated.
This question already has answers here:
CSS transition fade in
(4 answers)
Closed 3 years ago.
I need to get quotes to Fade In when clicking on the Get Quotes button. I am very new to JS and CSS and feel relatively lost. I also want to do this not using Jquery.
var quoteText = document.querySelector("h2");
var authorText = document.querySelector("h3")
var button = document.querySelector("button");
var body = document.querySelector("body");
button.addEventListener("click", function(){
var colorRandom = Math.floor(Math.random()*255)
var random = Math.floor(Math.random()*quotes.length)
quoteText.textContent = quotes[random];
authorText.textContent = "- " + authors[random];
})
First, if you want to get all (more than one) quotes you have to use querySelectorAll(), because they querySelector() method returns the first element. When you get all elements you can return random index in range of nodeList.length.
This is very simple example in https://codepen.io/iganchev87/pen/vqxjNm . If you want you can add in function with event listener and so on.
I hope it will help you.
var allQuotes = document.querySelectorAll("h2");
var randomIndex = Math.floor(Math.random()*(allQuotes.length));
console.log(allQuotes[randomIndex].textContent);
This question already has answers here:
How do JavaScript closures work?
(86 answers)
Closed 3 years ago.
I am dynamically creating an onclick event for html elements that are also created dynamically. I can make the elements just fine, but when I click on a specific one, it always runs the onclick for whatever the last element created was.
var parentNode = document.getElementById('mpacks');
parentNode.innerHTML = '';
for (var i = 0, size = listOfItems.length; i < size; i++){
var listNode = document.createElement('LI');
var tmp = document.createElement('a');
tmp.id = listOfItems[i];
tmp.innerText = listOfItems[i];
listNode.appendChild(tmp);
parentNode.appendChild(listNode);
tmp.onclick = function() {insertParam(listOfItems[i])};
}
For example: If I have the list [link1, link2, link3], I render them fine and they all show up on my page. When I click link 1, I would like that to be passed into the onclick function as shown... insertParam("link1"). Instead, when I click on link1, it passes in insertParam("link3") for some reason.
This is happening because of closure. Use let instead of var in for loop
for (let i = 0, size = listOfItems.length; i < size; i++)
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
I'm new to the syntax of pure JavaScript; Do you know why "getElementsByTagName" is not working in my simple test:
var btn = document.getElementsByTagName('button');
console.log(btn);
btn.onclick=function(){
alert('entered');
document.getElementById("demo").innerHTML="test";
}
Fiddle
getElementsByTagName returns an array, not a single element. You need to loop through your results and attach a function to each one individually, something like this:
var buttons = document.getElementsByTagName('button');
for( var x=0; x < buttons.length; x++ ) {
buttons[x].onclick = function(){
alert('entered');
document.getElementById("demo").innerHTML="test";
};
}
Should be
var btn = document.getElementsByTagName('button')[0];
instead of
var btn = document.getElementsByTagName('button');
getElementsByTagName returns array of matched elements. So use 0 index to access the button.
More about getElementsByTagName()
OR
You can provide the specific id on button and can use getElementById()
JS
var btn = document.getElementById('myButton');
HTML
<button id="myButton">....</button>
getElementsByTagName()
returns an array, which you have to access by their index.
For selecting a single element, use getElementById('id here');
The method itself says get Elements.
Just replace btn by btn[0] like this-
btn[0].onclick=function(){
alert('entered');
document.getElementById("demo").innerHTML="test";
}
This question already has answers here:
getElementById() wildcard
(6 answers)
Closed 9 years ago.
I need your help :) !
I have a page where there are a lot of tags and I have to retrieve in an array all id who begin by td_
I can not use the jQuery framework... Else there will be more easy...
Do you how I can do it ?
You can use the querySelector:
elementList = document.querySelectorAll('td[id^=td_]');
DEMO
var nodeList = document.querySelectorAll('[id^=td_]'); // or if only TDs are tergated use: 'td[id^=td_]' instead {thx Derek}
var arr = []; // Will hold the array of Node's
for (var i = 0, ll = nodeList.length; i < ll; arr.push(nodeList[i++]));