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);
Related
This question already has answers here:
Adding images to an HTML document with JavaScript
(7 answers)
Closed 1 year ago.
I double checked the SRC. i'm a newbie so perhaps there is something i'm not seeing.
<script>
window.addEventListener('load', generateFaces);
let numberOfFaces = 5;
const theLeftSide = document.getElementById("leftSide");
const theRightSide = document.getElementById("rightSide");
// const theBody = document.getElementsByTagName("body")[0];
function generateFaces() {
for (let i=0; i<numberOfFaces; i++) {
let face = document.createElement ('img');
face.setAttribute("src",'images/smile.png');
You are currently only creating the img objects but you also need to append them to your div. You can use the following code for appending:
theLeftSide.appendChild(face);
See Stackblitz for working example: https://stackblitz.com/edit/web-platform-jdsz4u?file=index.html
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:
JavaScript object: access variable property by name as string [duplicate]
(3 answers)
Closed 8 years ago.
I have the following object which has been passed from PHP
var phpVars = {"embedCode0":"<iframe id="player_0"></iframe>",
"embedCode1":"<iframe id="player_1"></iframe>",
"embedCode2":"<iframe id="player_2"></iframe>",
};
My HTML contains a matching number of <div class="video-container"></div> elements. I want to append each of the array items to each div in order. So that "embedCode0" is appended to the first div, "embedCode1" is appended to the second div and so on.
My jQuery function looks like this:
function vids(){
var $video = $('div.video-container');
$video.each(function(index) {
var $iframe = phpVars.embedCode + index;
$(this).append($iframe);
});
}
The function returns NaN. I have attempted to convert the index to a string but have not been able to succeed.
How can I increment the "embedCode" string?
You should be trying this
var $iframe = phpVars["embedCode" + index];
instead of
var $iframe = phpVars.embedCode + index;
When you are saying phpVars.embedCode + index it tries to first evaluate phpVars.embedCode and after that concatenating index in that.
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:
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