Using id as variable in querySelectorAll() [duplicate] - javascript

This question already has answers here:
How do I concatenate a string with a variable?
(5 answers)
Closed 4 years ago.
I need to use an id as variable in querySelectorAll() as shown below.
var thismodal = "myModal";
var clicked_id,trueModalId;
function openModal(clicked_id) {
trueModalId = thismodal + clicked_id;
document.getElementById(trueModalId).style.display = "block";
// var thisSlides = "mySlides" + clicked_id;
if($('trueModalId').find('.modal-content').length) {
alert(trueModalId);
}
}
function showSlides(){
var slides = document.querySelectorAll('trueModalId >.modal-content > .mySlides');
}
How do I make this work?

Just like every variable and string concatenation in js works. You forgot the # as an indicator for id though
var trueModalId = "myModal";
var slides = document.querySelectorAll('#' + trueModalId + ' >.modal-content > .mySlides');

Related

Fade In random quote's from array [duplicate]

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);

Why String.replace() doesn't work with events? [duplicate]

This question already has answers here:
Replace method doesn't work
(4 answers)
Closed 5 years ago.
Why String.replace() doesn't work with events??
var el = document.querySelector('input')
var pat = /(\d{3})(\d{3})(\d{4})/;
el.oninput = function(){
this.value.replace(pat, '$1-$2-$3')
}
Okay you aren't assigning it, or returning back, as you need to set the new value:
var el = document.querySelector('input')
var pat = /(\d{3})(\d{3})(\d{4})/;
el.oninput = function(){
this.value = this.value.replace(pat, '$1-$2-$3')
}

Javascript Element.onclick = functionName(as String)? [duplicate]

This question already has answers here:
Javascript - Variable in function name, possible?
(5 answers)
Closed 8 years ago.
I have function name in a var,
var i = 2; // iteration
var fname = 'myFunction' + i; // looks like myFunction2()
now i want to assign this function on element's event. i.e.
var elem = document.getElementById('e');
elem.onclick = fname;
It doesn't work. JS take function name as 'fname()' not the string inside it 'myFunction2()'
A little help would be appriciated,
Thanks in advance.
You can do this
window['myFunction' + i]
or create a array/object of functions.
var i = 2; // iteration
var fname = 'myFunction' + i; // looks like myFunction2()
var elem = document.getElementById('e');
elem.onclick = window[fname];
Check these answers: Javascript - Variable in function name, possible?
and Use JavaScript variable as function name?
What you attempt is to assign a string (variable) on an event.

Using javascript, is there a way to pull the window's current URL parameters and store into a variable? [duplicate]

This question already has answers here:
How can I get query string values in JavaScript?
(73 answers)
Check url parameter using javascript
(3 answers)
Closed 9 years ago.
I'm aware of window.location.host and window.location.pathname, but is there anyway to pull the extra parameters of a link like this?
http://www.example.com/test?u=123
I would like to end up with a dynamic variable that is equal to "u123" but without the double quotes.
Thanks!
var oGetVars = {};
if (window.location.search.length > 1) {
for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
aItKey = aCouples[nKeyId].split("=");
oGetVars[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : "";
}
}
// alert(oGetVars.yourVar);
window.location! MDN window.location
For a basic example of getting all the page parameters into a usable variable try this:
var pageParams = {};
if(location.search != ''){
var searchStr = location.search;
searchStr = searchStr.substr(1);
var searchStrArr = searchStr.split('&');
var pageParamPair, pageParamKey, pageParamValue;
for(var i=0;i<searchStrArr.length;i++){
pageParamPair = searchStrArr[i].split('=');
pageParamKey = pageParamPair[0];
pageParamValue = pageParamPair[1];
pageParams[pageParamKey] = pageParamValue;
}
}
thus in your case pageParams['u'] = "123"

How get the text from a listbox item? [duplicate]

This question already has answers here:
How to get Javascript Select box's selected text
(7 answers)
Closed 3 years ago.
When I try to get the text from a Listbox item in javascript it always returns undefined.
winkeloptie.value = winkels[i][0];
winkeloptie.text = (winkels[i][0]);
alert(winkeloptie.value) ///This returns the value very nicely
alert(winkeloptie.text) //Returns undefined
How can I get the text?
edit: for more info:
function addWinkels(){
var winkellijst = document.getElementById('winkel');
for (var i = 0;i < winkels.length;i++){
var winkeloptie = document.createElement("Option");
winkeloptie.text = (winkels[i][0]);
winkeloptie.title = (winkels[i][1]);
winkeloptie.value = winkels[i][0];
winkellijst.options.add(winkeloptie);
}
}
var x=document.getElementById("mySelect").selectedIndex;
var y=document.getElementById("mySelect").options;
alert("Index: " + y[x].index + " is " + y[x].text);

Categories

Resources