Develop Reference

Click and toggle between two classes on an array (no JQuery)

I need to make a site where I can add something to a shoppingcart. I do not need to store any data, so just changing a class to 'addedInCart' is enough. This is what I have so far, but it's not working yet. I know all the classnames I got are coming back in an array. I just dont know how to change them if the button is clicked. I tried a lot with the addEventListener and the toggle, but I just started coding, not everything is clear for me yet. I am not alloud to use Jquery, only HTML and Javascript.
This is what I have in Javascript:
var buyMe = document.getElementsByClassName("materials-icon");
function shoppingcart() {
for(let i = 0; i < buyMe.length; i++){
buyMe[i].classList.toggle("addedInCart");
buyMe[i].addEventListener("click", toggleClass, false)
}
}
This is what my button looks like:
<button class="material-icons" onclick="shoppingcart()"></button>
Thank you for your time!

Use event delegation to be able to use one handler. Use a data-attribute to verify the button as being a button for adding to cart. Something like:
document.addEventListener("click", handle);
function handle(evt) {
const origin = evt.target;
if (origin.dataset.cartToggle) {
// ^ if element has attribute data-cart-toggle...
origin.classList.toggle("addedInCart");
// ^ ... toggle the class
}
};
.addedInCart {
color: red;
}
.addedInCart:after {
content: " (in cart, click to remove)";
}
<button class="material-icons" data-cart-toggle="1">buy</button>
<button class="material-icons" data-cart-toggle="1">buy</button>
<button class="material-icons" data-cart-toggle="1">buy</button>

Change icon with javascript

In my foray into web development I have found a new problem, I need to change the icon for another one when I click on it. I have an idea of a function in javascript that sends the id of the icon and with the obtain the element, after obtaining element I hope to change keyboard_arrow_up by keyboard_arrow_down. However that is the part that is not performed, how do I get the value keyboard_arrow_up?
function change(iconID) {
var item = document.getElementById(iconID);
if (item) {}
}
<i id="icon1" onclick="change('icon1')" class="material-icons">keyboard_arrow_up</i>

This is the temporary solution, I had to change the icons of google design material by the fontawesome icons. However, I will continue investigating.
function change (iconID){
if(document.getElementById(iconID).className=="fa fa-chevron-up"){
document.getElementById(iconID).className = "fa fa-chevron-down";
}else{
document.getElementById(iconID).className = "fa fa-chevron-up";
}
}
<i id="icon1" onclick="change('icon1')" class="fa fa-chevron-up" aria hidden="true">

Sounds like , you need this kind of function
function changeIcon(classname or id) {
$("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
}
Note : the icons in above solution are copied from internet , please use your desire icons in there.

Remember Icons are just CSS class, so the function should change the class for another on the javascript function.
function change(iconID) {
var element = document.getElementById(iconID);
if (element.classList.contains("keyboard_arrow_up")) {
element.classList.add("keyboard_arrow_down")
} else {
element.classList.add("keyboard_arrow_up")
}
}

You can change innerText as follows:
document.addEventListener("DOMContentLoaded", function() {
let change = document.querySelector("#icon");
change.addEventListener('click' ,function () {
let item = document.querySelector("#icon");
if(this.innerText == 'keyboard_arrow_down'){
item.innerText = "keyboard_arrow_up";
}else{
item.innerText = "keyboard_arrow_down";
}
})
});
and the html:
<i id="icon" class="material-icons">keyboard_arrow_up</i>

function change(iconID) {
var item = document.getElementById(iconID);
if (item) {}
}
<i id="icon1" onclick="change('icon1')" class="material-icons">keyboard_arrow_up</i>
snap pans

Poweroff toggle button/div

I’m trying to make a power off button (actually it is a div), that when I click, it will change its appearance.
It looks like an interruptor, so I want to change the background-color of the page, the color of the icon ‘power off’ and the border-style of the button.
I took this function from another site and it is doing well in adding once a CSS property, but I want it to go on and of always.
document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
// this.classList.remove('poweroff');
this.classList.add('on');
} else {
this.classList.remove('on');
}
});
I believe the logic will be something like
x = x - 1
where x need to go turning from 0 to 1 and from 1 to 0, every time I click the button.
<body>
<div class="interruptor">
<div id="io" class="poweroff">
<i class="fa fa-power-off"></i>
</div>
</div>
<script src="https://use.fontawesome.com/ddde7c70b6.js"></script>
<script src="/js/logic.js" charset="utf-8"> </script>
</body>

Since you are checking on the basis of powerOff class you need to toggle it also like this
document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
this.classList.remove('poweroff');
this.classList.add('on');
} else {
this.classList.add('poweroff');
this.classList.remove('on');
}
});
Instead of checking if condition and adding and removing classes, use toggle like this
Read Here about toggle
document.getElementById('io').addEventListener('click', function () {
this.classList.toggle('on');
});

You should use toggle instead of add and remove, as :
document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
this.classList.toggle('poweroff');
this.classList.toggle('on');
} else {
this.classList.toggle('on');
}
});
This way it will automatically add and remove class on button click.

Get variables from button css in Javascript and use them as id

Hi I need a bit of help modifying my script. What I want to do:
I have a small and easy script. It changes the class of an container so I have influence on the behaviour and looking of the container. In my scenario the buttons open a div with a music player.
My problem is that I need to declare all buttons as a script. The button ID is in my case the onclick function (see code).
So when I have 10 or twenty links I need also everytime to modify the script. My idea is to have a script wich gets feed their variables by id's and classes of containers. So I need not to modify the script file.
// JavaScript Document
function AudioFF() {
var FFplayer = document.getElementById(x);
if (FFplayer.classList.contains("audio-hidden")) {
FFplayer.classList.remove("audio-hidden");
FFplayer.classList.add("audio-shown");
} else {
FFplayer.classList.remove("audio-shown");
FFplayer.classList.add("audio-hidden");
Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {audio.pause();});
}
};
dbbtn.onclick = function() {
x = "deepblue";
AudioFF();
};
swbtn.onclick = function() {
x = "spacewalk";
AudioFF();
};
fbtn.onclick = function() {
x = "forest";
AudioFF();
};
drbtn.onclick = function() {
x = "dreamrhythm";
AudioFF();
};
My idea was to use the same class of a button as an id for the container who needs to fade in with a string. The button has e.g. the class btn_a, btn_b … etc. The containers has the id btn_a, btn_b … I wanted the script to catch the class of the button and use this classname as a variable for getElementById. The closebutton is also using the same script to close the container. Thanks for help :-)

I will recommend to use data attribute instead
example like this:
//register listener like this
var btns = document.querySelectorAll('[data-music]');
btns.forEach(function(elm) {
elm.addEventListener('click', function(e) {
//your function
console.log(this.dataset.music);
})
})
<!--your links-->
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<!--just add data-music attribute make it the same with your div id and all set-->
<button data-music="m1">play m1</button>
<button data-music="m2">play m2</button>
<button data-music="m3">play m3</button>

You should be able to set a data tag attribute to the buttons and just read the variable from that:
<button id="myButton" data="variableForMyButton" />
document.getElementById(myButton).onClick = function(e){
x = e.target.getAttribute('data')
}
If multiple params are required you add additional data tags:
<button id="myButton" data="variableForMyButton" data-action="someSweetAction" />

Thanks guys, that was what I was looking for. My function is now like this:
The play button and closebutton are working.
<button data-music="m1">Deep Blue</button>
<div id="m1">Container Content</div>
var btns = document.querySelectorAll('[data-music]');
btns.forEach(function(elm) {
elm.addEventListener('click', function(e) {
//function
var FFplayer = document.getElementById((this.dataset.music));
if (FFplayer.classList.contains("audio-hidden")) {
FFplayer.classList.remove("audio-hidden");
FFplayer.classList.add("audio-shown");
} else {
FFplayer.classList.remove("audio-shown");
FFplayer.classList.add("audio-hidden");
Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {audio.pause();});
}
})
})

And here in jquery. Thanks to you all. You show me the way :-)
jQuery (document).ready(function($){
var btns = $('[data-music]');
$(btns).each(function() {
$('[data-music]').on('click', function(e) {
var FFplayer = $(this).data('music');
$("#" + FFplayer).toggleClass("audio-hidden audio-shown");
});
});
})

Get numerical value from parent with id like 'post-1' and use it in jQuery function

I'm trying to figure out the following.
I have following jQuery code:
var as = "";
var bPlay = 0;
audiojs.events.ready(function() {
as = audiojs.createAll();
$(".audiojs .play-pause").click(function() {
var e = $(this).parents(".audiojs").index(".audiojs");
$.each(as, function(t, n) {
if (t != e && as[t].playing) {
as[t].pause()
}
})
bPlay = !bPlay;
if (bPlay == 1) {
$(".bar").each(function(i) {
fluctuate($(this));
});
} else {
$(".bar").stop();
}
})
});
In a nutshell it preforms list of things when someone clicks particular .audiojs instance on a page. 1) checks if there is any other instance playing, if there is pauses it. And if it is playing applies fluctuate function to elements on a page that have class="bar". This is the issue! I don't want to apply it to all .bar's on a page, but only to a specific group that is associated with particular .audiojs instance (the one that is being clicked and is playing).
I thought of the following solution. Each .audiojs instance is inside a div tag that has id like "post-1", "post-2" etc.. where numerical value is post id from database. I can add this numerical id to bar, so it would be like bar-1, bar-2 etc... However after this I'm having issues.
For javascript to work I need to retrieve numerical value from "post-[id]" associated with audiojs instance that is being clicked and than store it somehow, so I can use it like this afterwards
bPlay = !bPlay;
if (bPlay == 1) {
$(".bar-[value retrieved from post-...]").each(function(i) {
fluctuate($(this));
});
} else {
$(".bar-[value retrieved from post...]").stop();
}
Could someone explain to me how it can be achieved?

Honestly, the easiest way would be to stick it in a custom data-* attribute on the <div id="post-X"> element, like so:
<div id="post-1" data-bar="bar-1">...</div>
Then, you said your .audiojs element is inside that <div>, so just go from this inside the event handler to that <div> element (using .closest()) and get the value of it:
var barId = $(this).closest('[id^="post-"]').attr('data-bar');
Then when you need to use it:
$("." + barId).each(function(i) {
fluctuate($(this));
});

Instead of embedding the value in a class or ID, use a data-* attribute:
<div class="audiojs" data-fluctuate-target="bar-1">
<button type="button" class="play-pause">
<!-- ... -->
</button>
</div>
<div class="bar-1">
<!-- ... -->
</div>
In your click event handler, use the following to fluctuate or stop the correct elements:
var fluctuateClass = $(this).closest('.audiojs').attr('data-fluctuate-target');
$('.' + fluctuateClass).each(function () {
if (bPlay == 1) {
fluctuate($(this));
} else {
$(this).stop();
}
});