Develop Reference

How can I simplify my js code for css animation?

I made CSS animations and buttons to play the animations and use add and remove classes to play each motion. I didn't use a toggle because if I use a toggle, it mixes with other buttons.
I've seen many CSS animations that didn't use js at all.
Is there any way to reduce my js code and simplify it?
Here is the code-
playbtn.addEventListener("click", function (e) {
e.preventDefault;
ball.style.display = "block";
bowl.style.display = "none";
ball.classList.remove("ball-move");
ball.offsetWidth = ball.offsetWidth;
ball.classList.add("ball-move");
document.getElementById('dFace').className = '';
dFace.offsetWidth = dFace.offsetWidth;
dFace.classList.add("p-head-move");
document.getElementById('ear').className = '';
ear.offsetWidth = ear.offsetWidth;
ear.classList.add("lean");
document.getElementById("mouthid").className = '';
mouth.offsetWidth = mouth.offsetWidth;
mouth.classList.add("mouth-move");
}, false);

I think you have to read about Animation play state api, that will reduce your code.
Doc Link!

1, From your code, I assume that bowl, ball, dFace, ear and mouth are all HTMElement that have already assigned with a value from document.getElementById. So, you may not have to get the HTMLElement again in this functions.
2, You may not need to assign the value for offsetWidth as it is a read-only property as described in https://www.w3schools.com/jsref/prop_element_offsetwidth.asp. You can remove those lines.
You might be missing () for e.preventDefault
I will suggest the followings:
playbtn.addEventListener("click", function (e) {
e.preventDefault();
ball.style.display = "block";
bowl.style.display = "none";
ball.classList.remove("ball-move");
ball.classList.add("ball-move");
dFace.className = '';
dFace.classList.add("p-head-move");
ear.className = '';
ear.classList.add("lean");
mouth.className = '';
mouth.classList.add("mouth-move");
}, false);
Also, the action on dFace, ear and mouth are similar, so you may wrap it in a function call restartAnimation to further reduce duplications of your code.
const restartAnimation = (ele, className) => {
ele.className = '';
ele.classList.add(className);
}
playbtn.addEventListener("click", function (e) {
e.preventDefault();
ball.style.display = "block";
bowl.style.display = "none";
ball.classList.remove("ball-move");
ball.classList.add("ball-move");
restartAnimation(dFace, "p-head-move")
restartAnimation(ear, "lean")
restartAnimation(mouth, "mouth-move")
}, false);

You should include your CSS in your post as well! But I think you could avoid the restartAnimation instances you have by using animation-iteration-count: infinite; (if you are trying to make your animations loop, for example) in the CSS selector for the animated parts. I would recommend looking into the CSS animation documentation here as it's very clear! Good luck!

JavaScript navbar opening

I'm trying to do javascript navbar but for some reason can't get it to work. I inspected those elements on the browser, but when I click the open button elements don't get those classes. Could somebody check out what is my problem?
Here's my Javascript:
const body = document.querySelector("body");
const navbar = document.querySelector(".main-menu");
const openButton = document.querySelector(".open-button");
const closeButton = document.querySelector(".close-button");
openButton.onClick = () => {
navbar.classList.add("show");
openButton.classList.add("hide");
body.classList.add("disabled");
};
closeButton.onClick = () => {
body.classList.remove("disabled");
navbar.classList.remove("show");
openButton.classList.remove("hide");
};

You can use Jquery instead for that simply DOM Manipulations, which is a framework of Javascript. Using Jquery makes your code more readable and shorter than vanilla javascript.
$(document).ready(()=>{
$("#openButton").click(()=>{
$("body").toggleClass("disabled");
$("#closeButton").toggleClass("hide");
$(".main-menu").toggleClass("show");
});
});

Vanilla Javascript find element with attribute on click

I am trying to translate these few lines of jQuery based code into vanilla JS but I am struggling. Can someone please explain how to do it?
function googletranslate() {
$(".footer-toggle li, .select-lng li").on("click", function() {
var rel = $(this).children("a").attr("rel");
$(".goog-te-menu-frame:first").contents().find(".goog-te-menu2 .goog-te-menu2-item span:contains('" + rel + "')").get(0).click();
});
}
setTimeout(googletranslate, 1000);
I know how to do a click event with javascript but im having a hard time finding the element (Just started learning).
Spanish
Basically when the link is clicked, it feeds through rel value to the hidden google translate widget, and simulates a click on the desired language.
Can someone explain how please? Would it be easier to use a select box and get the value from that instead?

document.querySelector('a[rel="Spanish"]')
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

function googletranslate() {
['.footer-toggle li', '.select-lng li'].forEach(selector => {
const elm = document.querySelector(selector);
elm.addEventListener('click', clickHandler);
});
function clickHandler(e) {
const rel = e.target.querySelector('a').getAttribute('rel');
const someGoogleSpan = document.querySelector(".goog-te-menu-frame:first")
.querySelectorAll(".goog-te-menu2 .goog-te-menu2-item span:contains('" + rel + "')")[0];
someGoogleSpan.click();
}
}
setTimeout(googletranslate, 1000);

How to remove the div content?

Can you please tell me how to remove the div content? I am getting data from server regularly. I check if div height is "100" .
Then it remove content and write data from top in jQuery.
I tried very thing nothing is working for me.
var scrollerDivHeight=$('#scroller').height();
if(scrollerDivHeight==100){
// $('#scroller').val()='';
$('#scroller' ).innerHTML = '';
$("#scroller").empty();
$('#scroller').val('');
$('#scroller').html('');
$('#scroller').refresh();
myScroll.refresh();
}

You can try replacing this with your code
var scrollerDivHeight=$('#scroller').height();
if(scrollerDivHeight >= 100){
$('#scroller').replaceWith('<div id="scroller"></div>');
}

Use > not == also fix the id
setInterval(function () {
$('#scroller').append("Hiiiii. is div").css("line-height", "100px");
var scrollerDivHeight=$('#scroller').height();
//alert(scrollerDivHeight)
console.log(scrollerDivHeight)
if(scrollerDivHeight>100){
$("#scroller").empty();
}
}, 1000);
DEMO

Us the Empty() method in jquery
setInterval(function () {
$('#realtime').append("Hiiiii. is div").css("line-height", "100px");
var scrollerDivHeight=$('#realtime').height();
if(scrollerDivHeight>100){
$("#realtime").empty();
}
}, 1000);
See fiddle Demo
Read Jquery Empty Documentation here

How to remove or reset CSS style using JS?

I want either remove or reset a style applied on a particular DOM node using JS.
node.style.webkitTransitionDuration = '5000ms';
node.style.webkitTransformOrigin = '200px 200px';
node.style.webkitTransform = 'rotateZ(25rad)';
I want to reset/set webkitTransform time and again on a fire of an event
Tried like this
node.style.webkitTransform = 'rotateZ(0rad)';
node.style.webkitTransform = 'rotateZ(25rad)';
But its not working.
P.S. Can not use any framework.

Here's an example that should fit your needs. It toggles when you click on the document. Note: it of course only works in Webkit-based browsers.
animateNode(document.getElementById("test"), "5000ms", "200px 200px", "rotateZ(25rad)");
var toggle = toggleValue();
function animateNode(node, duration, origin, transform)
{
node.style['webkitTransitionDuration'] = duration;
node.style['webkitTransformOrigin'] = origin;
node.style['webkitTransform'] = transform;
}
function toggleValue() {
var num = 1;
return function ()
{
return ++num;
};
}
document.onclick = function()
{
var toggleNum = toggle();
if(toggleNum % 2 === 0)
{
animateNode(document.getElementById("test"), "5000ms", "200px 200px", "rotateZ(0rad)");
}else if(toggleNum % 2 === 1)
{
animateNode(document.getElementById("test"), "5000ms", "200px 200px", "rotateZ(25rad)");
}
}
http://jsfiddle.net/GdGw7/3/

If you are looking to remove the rule from the element then this should work:
node.style.webkitTransform = '';

You say you don't want to use a framework. but if it is OK (according to your comment) to do so:
You can use jQuery:
so you can do in jQuery:
$('selector').css({
webkitTransitionDuration = '5000ms',
webkitTransformOrigin = '200px 200px',
webkitTransform = 'rotateZ(25rad)'
})
you can clear out the style element with:
$('selector').attr('style','');
add class:
$('selector').addClass('newClass');
remove class:
$('selector').removeClass('rClass');