Can I use this code for (bootstrap 5) without jQuery?
<script type="text/javascript">
$( document ).ready(function() {
setInterval(function(){
var attend = jQuery('#pills-profile').hasClass('active');
if(attend == true){
jQuery('#id2').show();
jQuery('#id1').hide();
}else{
jQuery('#id2').hide();
jQuery('#id1').show();
}
}, 1000)
});
Something like this
document.addEventListener("DOMContentLoaded", function () {
const first = document.getElementById("id1");
const second = document.getElementById("id2");
const attend = document.getElementById("pills-profile");
setInterval(function () {
if (attend.classList.contains("active")) {
second.style.display = "block";
first.style.display = "none";
} else {
second.style.display = "none";
first.style.display = "block";
}
}, 1000);
});
Related
I'm struggeling with this functionality of hiding a row based on a select:
<tr data-param-name="nodeGroup">
in web api, Program.cs:
app.UseSwaggerUI(options => {
options.InjectJavascript("/custom.js");
});
The javascript custom.js:
var providerSelect = null;
var nodeGroup = null;
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
// document ready
providerSelect = document.querySelector("[data-param-name='provider'] select");
nodeGroup = document.querySelector("[data-param-name='nodeGroup']");
if (providerSelect) {
providerSelect.addEventListener("change", function () {
var text = providerSelect.options[providerSelect.selectedIndex].text;
if (text == "EcoPlatform") {
nodeGroup.setAttribute("visibility", "visible");
}
else {
nodeGroup.setAttribute("visibility", "collapse");
}
});
}
}
};
The above does not work.
The page is not actually shown on readystate === 'complete'
providerSelect does not get populated before I click the downarrow on the "accordion". <noscript> is replaced on click.
Was solved like this:
document.addEventListener("change", function (event) {
var providerSelect = document.querySelector("[data-param-name='provider'] select");
if (event.target == providerSelect) {
var nodeGroup = document.querySelector("[data-param-name='nodeGroup']");
var selectedText = providerSelect.options[providerSelect.selectedIndex].text;
var dataset = document.querySelector("[data-param-name='datasetType']");
if (selectedText == "EcoPlatform") {
nodeGroup.style["visibility"] = "visible";
dataset.style["visibility"] = "visible";
}
else {
nodeGroup.style["visibility"] = "collapse";
dataset.style["visibility"] = "collapse";
}
}
});
Need bit of help to make memory-game, as I am trying to click element to show and open, compare inner html and if equal add the class match to keep two elements opened BUT when i click (element) card it throws error of "uncaught TypeError: cannot read property classList of undefined at HTMLLIElement .cardClick" which i dont know how to rectify, any help will be appreciated. Thanks.
Complete code at
https://codepen.io/ma-halepoto/pen/OwEqNr
window.onload = function () {
let openedCards = [];
matchedCards = [];
//currentCard = [];
//previouseCard= 0 ;
moveCount = 0 ;
restart = document.getElementsByClassName ('restart');
modal = document.getElementById('myModal');
span = document.getElementsByClassName('close')[0];
displayCards = [];
openedCardsLength=null;
// console.log (restart); just to see if restart works
restart[0].addEventListener ('click', function (){
location.reload();
})
// console.log("It's loaded!") to check if this works
const cards = ['fa-diamond','fa-diamond', 'fa-paper-plane-o','fa-paper-plane-o', 'fa-anchor', 'fa-anchor', 'fa-bolt', 'fa-bolt', 'fa-cube', 'fa-cube', 'fa-leaf', 'fa-leaf', 'fa-bicycle', 'fa-bicycle',
'fa-bomb','fa-bomb' ];
let shuffleCards = shuffle (cards);
// console.log (shuffleCards); to check if this works
let cardElements = document.getElementsByClassName('symbols');
// console.log (cardElements); to check if this works
for (i=0; i < cardElements.length; i++ ) {
cardElements[i].className = shuffleCards[i]+ ' fa symbols';
}
// initialising popup
function popup() {
modal.style.display = "flex";
document.getElementById('p1').innerHTML = 'You did it in '+ moveCount+ ' moves' + ' and ' + seconds+ ' seconds.';
}
// Closing popup by clicking x
span.onclick = function closeX () {
modal.style.display = "none";
}
// function close popup by clicking any where
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Stopwatch initialisation
let stopWatch = document.getElementById ('timer');
time = 0;
seconds=0
// start time
function startTime () {
time = setInterval ( function (){
seconds++;
stopWatch.innerHTML = seconds + ' s';
}, 1000);
}
// stop the time function
function stopTime () {
clearInterval (time);
}
displayCards = document.getElementsByClassName ('card');
console.log(displayCards);
// Click Event
function cardClick () {
openedCards = this;
openedCards.removeEventListener ('click', cardClick);
console.log (openedCards);
// openedCards[1].removeEventListener ('click', cardClick);
// updating move counts
let countMoves = document.getElementById ('moves');
moveCount++ ;
countMoves.innerHTML= moveCount;
console.log(countMoves);
// star ranking;
if ( moveCount === 20) {
let removeStar = document.getElementById('star3');
removeStar.style.display = 'none';
} else if (moveCount ===30) {
let removeStarTwo = document.getElementById ('star2');
removeStarTwo.style.display = 'none';
}
// start stopwatch at the first click.
if ( moveCount ===1) {
startTime ();
}
//function clickedCards () {
//openedCards.push(this);
openedCardsLength = openedCards.length;
Error here
openedCards[0].classList.add('open','show');
openedCards[1].classList.add('open', 'show');
console.log (openedCards[0]);
console.log (openedCards[1]);
console.log (openedCardsLength);
if (openedCardsLength ===2) {
if (openedCards[0].type === openedCards[1].type){
openedCards[0].classList.add('match');
openedCards[1].classList.add('match');
} else {
openedCards[0].classList.remove('open','show');
openedCards[1].classList.remove('open','show');
openedCards[0].addEventListener ('click', cardClick);
openedCards[1].addEventListener ('click', cardClick);
}
}
}
// event listener function
for (i=0; i < displayCards.length; i++) {
displayCards[i].addEventListener('click', cardClick);
}
}`
I am trying to make a button which when clicked will stop the execution of the automatic slideshow.
The clearTimeout() function isn't working for some strange reason. can someone please tell me how to make it work?
var button = document.getElementById("button");
button.addEventListener("click",stop);
function stop(){
**clearTimeout(t);**
}
window.addEventListener("load",finalResult);
**var t = setTimeout(function(){finalResult()},0);**
function finalResult(){
getFirstImage();
function getFirstImage(){
img1.style.display = "block";
setTimeout(getSecondImage,3000);
}
function getSecondImage(){
img1.style.display = "none";
img2.style.display = "block";
setTimeout(getThirdImage,3000);
}
function getThirdImage(){
img3.style.display = "block";
img2.style.display = "none";
setTimeout(getFourthImage,3000);
}
function getFourthImage(){
img4.style.display = "block";
img3.style.display = "none";
setTimeout(loopAgain,3000);
}
function loopAgain(){
img4.style.display = "none";
setTimeout(getFirstImage,0);
}
}
You have to clear all the timeouts present in the page.
Something like this:
var button = document.getElementById("button");
button.addEventListener("click", stop);
function stop() {
clearTimeout(t);
clearTimeout(a);
clearTimeout(b);
clearTimeout(c);
clearTimeout(d);
clearTimeout(e);
}
window.addEventListener("load", finalResult);
var t = setTimeout(function() {
finalResult()
}, 100);
var a, b, c, d, e;
function finalResult() {
getFirstImage();
function getFirstImage() {
img1.style.display = "block";
a = setTimeout(getSecondImage, 3000);
}
function getSecondImage() {
img1.style.display = "none";
img2.style.display = "block";
b = setTimeout(getThirdImage, 3000);
}
function getThirdImage() {
img3.style.display = "block";
img2.style.display = "none";
c = setTimeout(getFourthImage, 3000);
}
function getFourthImage() {
img4.style.display = "block";
img3.style.display = "none";
d = setTimeout(loopAgain, 3000);
}
function loopAgain() {
img4.style.display = "none";
e = setTimeout(getFirstImage, 0);
}
}
How to have the exact typing effect used on this page? https://www.braintreepayments.com/
<span class="writer" data-writer-command="['PayPal?', 'Apple Pay?', 'Venmo?', 'Bitcoin?']">Ve</span>
Here is the JSFiddle with the extracted library from the website : http://jsfiddle.net/8g6dsp0p/1/
You can initialize the script with this following code :
<span class="writer" data-writer-command="['PayPal?', 'Apple Pay?', 'Venmo?', 'Bitcoin?']"></span>
<script>
$(document).ready(function() {
new Writer
});
</script>
var word = "Venmo";
var cur = 1;
var intrvl = setInterval(function () {
$('.writer').html(word.slice(0,cur));
if(cur >= word.length) {
clearInterval(intrvl);
}
else{
cur++;
}
}, 500);
JSBin
The above jsBin has the code you require. it is not neatly formatted but code is correct.
Again to reproduce the code
<span clas="writer"></span>
var words = ["Venmo", "alright", "done", "ok"];
var curWord = 0;
function writeWord(word, deleteWord) {
var cur;
if(deleteWord){
cur = deleteWord.length;
var delIntrvl = setInterval(function () {
if(!cur) {
clearInterval(delIntrvl);
if(curWord < (words.length - 1)) {
writeWord(words[++curWord],"");
}
else {//if you dont need continous looping remove this else statement
curWord = 0;
writeWord(words[curWord],"");
}
}
else{
var reqWrd = deleteWord.slice(0,cur);
console.log(reqWrd);
$('.writer').html(reqWrd);
cur--;
}
}, 200);
}
else {
cur=1;
var intrvl = setInterval(function () {
if(cur >= word.length) {
clearInterval(intrvl);
writeWord("",word);
}
else{
var reqWrd = word.slice(0,cur);
console.log(reqWrd);
$('.writer').html(reqWrd);
cur++;
}
}, 200);
}
}
writeWord(words[curWord], "");
Updating the code and also providing jsBin for continous looping
ContinousLoopJsBin
My code for changing the background color works great, but the "else" return does not work. Am I missing something? here is what i have:
<script type="text/javascript">
$(document).ready(function() {
var input = document.getElementById("test");
input.onclick = function ()
{
document.getElementById("quote_input").style.backgroundColor = "#AAB3AA";
document.getElementById("test").style.backgroundColor = "#AAB3AA";
else {
document.getElementById("quote_input").style.backgroundColor = "#000";
document.getElementById("test").style.backgroundColor = "#000";
}
};
});
</script>
Well sir, unless I'm mistaken, you are missing an IF statement.
you're missing the "if" part of the statement...
<script type="text/javascript">
$(document).ready(function() {
var input = document.getElementById("test");
input.onclick = function ()
{
if(SOME_CONDITION) {
document.getElementById("quote_input").style.backgroundColor = "#AAB3AA";
document.getElementById("test").style.backgroundColor = "#AAB3AA";
} else {
document.getElementById("quote_input").style.backgroundColor = "#000";
document.getElementById("test").style.backgroundColor = "#000";
}
};});
</script>