How can write JavaScript code without jQuery by using bootstrap 5? - javascript

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

In Swashbuckle / Swagger; How do I hide a dropdown menu based on anothers selected value

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

Unable to add classList property to an array's index

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

issues with clearing setTimeout() in javascript code

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 replicate a typing effect using jQuery/JavaScript?

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

Else return for returning to originals state is not working

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>

Categories

Resources