We Keep Coding

Separation of CSS and JS file in VUE is not working

I'm just learning how to use VUE and I’m trying to separate my HTML, CSS and JS files to get more organized. But something is going wrong, I think with the CSS file but I’m not sure.
Just to get a basic understanding what my code is supposed to do:
There is a welcome screen where 2 rows of text are displayed which are being faded in and out
HTML:
<template>
<header id="mainHeader">
<div class="logo-container"><img src="../Logo/LogoIND.png" alt="Logo IND" id="logo"></div>
</header>
<main>
<div class="loop-text">
<p>BIER</p>
<p>Hoşgeldiniz</p>
<p>Ласкаво просимо</p>
<p>ښه راغلاست</p>
<p>أهلا بك</p>
<p>Welkom</p>
</div>
<div class="loop-text2">
<p>DRINK to Start</p>
<p>Başlatmak için dokunun</p>
<p>Торкніться, щоб почати</p>
<p>مسکارا پیل دی</p>
<p>المس للبدء</p>
<p>Aanraken om te beginnen</p>
</div>
</main>
</template>
<script src="./Welkom.js"></script>
<style scoped>
#import './CSS.css';
</style>
Here at the bottom i have my references to my CSS and JS.
CSS:
template {
background-color: #452170;
color: #ffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
margin: 0;
height: 1080px;
}
.logo-container {
text-align: center;
width: 100%;
}
#logo {
height: 17em;
}
.containter {
height: auto;
}
#keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.loop-text {
width: 100%;
text-align: center;
position: relative;
height: 25em;
}
.loop-text p {
font-family: 'PT Serif';
opacity: 0;
transition: 1.75s ease-out;
width: inherit;
position: absolute;
height: inherit;
font-size: 16em;
top: 0.6em;
margin: 0;
padding: 0;
}
.loop-text .show {
opacity: 1;
}
.loop-text2 {
width: 100%;
text-align: center;
position: relative;
height: 25em;
}
.loop-text2 p {
font-family: 'PT Serif';
opacity: 0;
transition: 1.75s ease-out;
width: inherit;
position: absolute;
height: inherit;
font-size: 9em;
top: 0.6em;
margin: 0;
padding: 0;
}
.loop-text2 .Afbeelden {
opacity: 1;
}
And my javascript:
let texts = document.querySelectorAll(".loop-text p");
let prev = null;
let animate = (curr, currIndex) => {
let index = (currIndex + 1) % texts.length
setTimeout(() => {
if(prev) {
prev.className = "";
}
curr.className = "show";
prev = curr;
animate(texts[index], index);
}, 3500);
}
animate(texts[0], 0);
let texts2 = document.querySelectorAll(".loop-text2 p");
let prev2 = null;
let animate2 = (curr, currIndex) => {
let index = (currIndex + 1) % texts2.length
setTimeout(() => {
if(prev2) {
prev2.className = "";
}
curr.className = "Afbeelden";
prev2 = curr;
animate2(texts2[index], index);
}, 3500);
}

Why I have to click 2 times to run this function?

This is the code i'm working on, and i don't know why everytime that i refresh the page i need to click 2 times to open the menu. Once i click the second time all works correctly.
This is the html of the button:
var x = document.getElementById("overlay-menu");
x.style.height = "0%";
function showMenu() {
var x = document.getElementById("overlay-menu");
if (x.style.height === "0%") {
x.style.height = "100%";
} else {
x.style.height = "0%";
}
}
.overlay-menu {
width: 100%;
height: 0%;
padding: 0;
margin: 0;
background-color: #ffffff;
z-index: 10000;
position: fixed;
color: #0A0A0A;
overflow: hidden;
display: block;
transition: .5s cubic-bezier(.55, .03, .26, 1.01);
}
.nav-menu-text {
width: fit-content;
height: fit-content;
margin: 0;
padding: 0;
color: #EB761D;
font-size: 15px;
position: relative;
top: 2.8em;
cursor: pointer;
}
<p class="nav-menu-text" onclick="showMenu()">MENU</p>
<div class="overlay-menu" id="overlay-menu">
<!-- code of the menu -->
</div>

x.style.height is probably not "0%" when your code runs, try changing the condition from:
if (x.style.height === "0%") {
to
if (x.style.height !== "100%") {

No result from searching using Google Apps Script

I wrote this in google apps script to allow me to open a popup player for youtube in google docs. The other files work fine but this does not
The issue is that the search engine and the UI seem to work, but there is no result from searching, no matter how long I wait. if anyone could point out my mistake and tell me how to fix it that'd be awesome.
function embed(cacheKey, resourceId, resourceType) {
const progress = document.querySelector("#progress");
progress.style.display = "block";
console.log(cacheKey, resourceId, resourceType);
var text;
let checked = document.querySelector('input[type="radio"]:checked').value;
if (checked === 'string') {
text = document.querySelector('input[name="link-text"]').value;
}
let prefs = {
"type": checked,
"string": text
};
google.script.run.withSuccessHandler(function(data) {
if (data.success) {
document.querySelector('#result').innerText = "Video linked!";
setTimeout(function() {
document.querySelector('#result').innerText = "";
}, 3000);
}
if (data.type === "copy" && data.url) {
navigator.permissions.query({
name: "clipboard-write"
}).then(result => {
if (result.state == "granted" || result.state == "prompt") {
navigator.clipboard.writeText(data.url);
alert('URL copied to clipboard');
}
});
}
progress.style.display = "none";
}).DTApi('DT', 'embed', cacheKey, prefs, resourceId, resourceType);
}
function previewEmbed(cacheKey, resourceId, resourceType) {
const progress = document.querySelector("#progress");
progress.style.display = "block";
console.log(cacheKey, resourceId, resourceType);
google.script.run.withSuccessHandler(function(result) {
let container = document.querySelector("#preview");
let data = JSON.parse(result);
console.log(data)
console.log('Trying to preview: ' + Object.keys(data))
let settings = function(id, title) {
const template = "<div class='settings'> \
<h2>Settings</h2> \
<p>How do you want to link your video?</p> \
<input type='radio' id='copy-radio' name='embed-type' value='copy' /><label for='copy-radio'>Copy link to clipboard</label/> \
<br /> \
<input type='radio' id='thumbnail-radio' name='embed-type' value='thumbnail' /><label for='thumbnail-radio'>Thumbnail</label> \
<br /> \
<input type='radio' id='toggle' name='embed-type' value='string' /><label for='toggle'>Text</label> \
<input type='text' id='link-text' name='link-text' value='" + title + "' /> \
<div id='settings-action'> \
<button class='action' onclick='embed(this.parentNode.parentNode.parentNode.dataset.cachekey, this.parentNode.parentNode.parentNode.dataset.resourceid, this.parentNode.parentNode.parentNode.dataset.resourcetype)'>Get Video</button> \
<button onclick='this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode)'>Close</button> \
<div id='result'></div> \
</div>\
</div>";
return template;
}
let previewContainer = document.createElement('div');
previewContainer.setAttribute('class', 'preview-container');
previewContainer.dataset.resourceid = data.resourceId;
previewContainer.dataset.resourcetype = data.resourceType;
previewContainer.dataset.cachekey = data.cacheKey;
if (data.resourceType === "channel") {
previewContainer.innerHTML = '<img src="' + data.preview.high.url + '" />';
} else {
previewContainer.innerHTML = data.preview.items[0].player.embedHtml;
}
container.appendChild(previewContainer);
previewContainer.insertAdjacentHTML('beforeend', settings(data.id, data.title));
progress.style.display = "none";
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
}).DTApi('DT', 'preview', cacheKey, resourceId, resourceType);
}
function search(page, key) {
const progress = document.querySelector("#progress");
progress.style.display = "block";
// If there's a page token, set it
var pageToken = page || "";
var key = key || "";
let term = document.querySelector('#search-input').value;
let checked = document.querySelectorAll('input[name="queryArg"]:checked');
let prev = document.querySelector("#prev");
let next = document.querySelector("#next");
let total = document.querySelector("#total-results");
// Get the checked search types
let args = {};
args.types = [];
// TODO: Validate that there is at least _one_ checked box
// Default to videos
checked.forEach(function(el) {
args.types.push(el.value);
});
args.pageToken = page;
args.key = key;
const container = document.querySelector('#search-result');
container.innerText = ('Searching...');
google.script.run.withSuccessHandler(function(result) {
container.innerText = '';
let data = JSON.parse(result);
console.log(data.data.length);
if (data.data.length === 0) {
container.insertAdjacentHTML('beforeend', '<p>No videos found in your search! Try another search term.</p>');
}
let videoContainers = [];
for (var i = 0; i < data.data.length; i++) {
videoContainers.push(data.data.splice(0, 10))
}
console.log(videoContainers);
videoContainers.forEach(function(items) {
items.forEach(function(vid) {
container.insertAdjacentHTML('beforeend', vid);
});
});
if (data.nextPage == undefined) {
next.disabled = true;
} else {
next.disabled = false;
next.dataset.page = data.nextPage;
next.dataset.cachekey = data.nextKey;
}
if (data.prevPage == undefined) {
prev.disabled = true;
} else {
prev.disabled = false;
prev.dataset.page = data.prevPage;
prev.dataset.cachekey = data.prevKey;
}
document.querySelector('#pagination').style.display = 'block';
progress.style.display = "none";
}).DTApi('DT', 'search', term, args);
}
function getPage(el) {
let page = el.dataset.page;
let key = el.dataset.cachekey;
search(page, key)
}
function paginate(array, page) {
return array.slice(page * 10, 10)
}
$("#doc").click(function() {
google.script.run.withSuccessHandler(showFrames).getVideos();
})
$("#comments").click(function() {
google.script.run.withSuccessHandler(showFrames).getCommentData();
});
function showFrames(frames) {
$("#embed").empty();
console.log(frames.length);
for (var i = 0; i < frames.length; i++) {
$("#embed").append("<iframe src='https://youtube.com/embed/" + frames[i] + "' width='100%' height='480' frameborder='0' allowfullscreen></iframe>");
}
}
#progress {
display: none;
position: absolute;
right: 70px;
top: -5.5px;
}
.search {
width: 80%;
margin: 0 auto;
position: relative;
}
.search>input[type="text"] {
width: 60%;
margin-right: 10px;
}
.search>#search-args {
width: 60%;
}
#search-result {
margin-top: 15px;
min-height: 400px;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
align-content: center;
}
#search-result>div {
transition: box-shadow ease-in-out 0.25s;
width: 300px;
height: 180px
}
#search-result>.video-container:hover {
box-shadow: 0 0 5px blue;
cursor: pointer;
}
#pagination {
display: none;
text-align: right;
margin-right: 20px;
}
#preview {
margin: 15px auto 0;
}
.settings {
display: inline-block;
vertical-align: middle;
width: 35%;
position: relative;
}
#result {
display: inline-block;
margin-left: 15px;
}
#preview img {
width: 45%;
height: auto;
}
#preview iframe,
img {
vertical-align: middle;
}
#preview iframe+.settings {
margin-left: 30px;
}
#preview img+.settings {
margin-left: 30px;
}
.settings>label {
line-height: 36px;
}
#link-text {
visibility: hidden;
font-size: 18px;
margin-bottom: 15px;
margin-left: 15px;
width: 60%;
}
#toggle:checked~#link-text {
visibility: visible;
}
.settings>button {
display: block;
margin-bottom: 15px;
}
.video-container {
background-position: center center;
background-size: cover;
position: relative;
flex: 0 0 auto;
margin: 5px;
}
.type-icon {
display: block;
position: absolute;
bottom: 10px;
right: 10px;
height: 32px;
width: 32px;
}
.action-container {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 65px;
background-color: rgba(250, 250, 250, 0.75);
width: 100%;
text-align: center;
opacity: 0;
transition: all ease-in-out 0.5s;
}
.action-container>span {
padding: 5px;
line-height: 65px;
font-size: 24px;
}
span:hover {
cursor: pointer;
transition: all ease-in-out 0.15s;
}
.video-container:hover>.action-container {
opacity: 1;
}
#embed {
width: 100%;
font-family: sans-serif;
}
#srcSelect {
width: 100%;
margin-bottom: 10px;
}
#srcSelect span {
display: inline-block;
margin-right: 15px;
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 255, 0.8);
cursor: pointer;
border-radius: 3px;
border: 1px solid rgba(0, 0, 180, 0.8);
padding: 12px;
}
#srcSelect span:hover {
color: rgba(0, 0, 180, 1);
background-color: rgba(255, 255, 255, 0.8);
}
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<div class="search">
<input type="text" id="search-input" value="" />
<button id="search-btn" class="action" onclick="search(null)">Search</button>
<button onclick="document.querySelector('#search-result').innerHTML = ''">Clear</button>
<svg id="progress" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#00d" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#00d" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="0.5s"
repeatCount="indefinite"/>
</path>
</svg>
<div id="search-args">
<label><input type="checkbox" name="queryArg" value="video" checked="checked"/>Videos</label>
<label><input type="checkbox" name="queryArg" value="channel" />Channels</label>
<label><input type="checkbox" name="queryArg" value="playlist" />Playlists</label>
</div>
</div>
<div id="preview"></div>
<div id="pagination">
<button id="prev" data-page="" onclick="getPage(this)">Previous</button>
<button id="next" data-page="" onclick="getPage(this)">Next</button>
</div>
<div id="search-result"></div>
The error i'm getting is :
"uncaught reference error: google is not defined"
the error says the issue occurs within line 360. i copied the whole ass code, line for line, from the original editor, where line 360 is:
} else {
the hell should i do? i have looked over the code relentlessly for the past 3 days and have found no evidence of an error other than the fact the search results never come through. i am truly stumped on this one and i need the coding cavalry.

As a user said in the comments, google object is automatically imported in the html file when you're using Apps Script [1]. You need to delete this line: <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=..." async defer></script>, which is causing the error as explained in this other question [2].
[1] https://developers.google.com/apps-script/guides/html/reference/run
[2] Google Maps API throws "Uncaught ReferenceError: google is not defined" only when using AJAX

jQuery mouseenter and mouseleave handler not working properly

I have been trying desperately to solve my problem and I just don't find the mistake in my code. So what I am programming is a slider which works with jQuery and I had everything precisely as I wanted it but then I made some completely irrelevant changes and it didn't work any more. My issue is that (as you can see in the jsfiddle) the arrows to navigate the slider don't (always) show up. They only show up at the very end of the Interval (see jsfiddle). Am I doing something wrong with the .mouseenter and .mouseleave-handlers?
Would you recommend using the `.hover-handler?
Thanks in advance
JSFiddle: http://jsfiddle.net/VincentBS/ogm967bz
And if that helps: Here is the website the slider is programmed for
$(document).ready(function(){
hideArrows();
hideImages();
$(".back").click(function(){prevImage()});
$(".pre").click(function(){nextImage()});
$("#slider").mouseenter(function(){
//showArrows();
$(".back").show();
$(".pre").show();
})
$("#slider").mouseleave(function(){
//hideArrows();
$(".back").hide();
$(".pre") .hide();
})
start();
});
function hideArrows(){
$(".back").hide();
$(".pre") .hide();
}
function showArrows(){
$(".back").show();
$(".pre") .show();
}
function hideImages(){
$("#2").hide();
$("#3").hide();
$("#4").hide();
$("#5").hide();
}
function start(){
// save when we started for calculating progress
var startedAt = Date.now();
// set animation bounds
var startValue = 1;
var endValue = 100;
// figure out how much change we have over the whole animation
var delta = endValue - startValue;
// Animation function, to run at 60 fps.
t = setInterval(function(){
// How far are we into the animation, on a scale of 0 to 1.
var progress = (Date.now() - startedAt) / 5000;
// If we passed 1, the animation is over so clean up.
if (progress > 1) {
nextImage();
}
}, 1000 / 60);
}
function prevImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) - 1;
if(next < 1){next = 5}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
function nextImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) + 1;
if(next > 5){next = 1}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
#slider {
float: left;
width: 700px;
height: 233px;
}
.back, .pre {
background-color: #EB5A00;
opacity: 1;
margin-top: 92px;
color: #FFF;
font-size: 25px;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
}
.back {
float: left;
margin-left: 10px;
}
.pre {
float: right;
margin-right: 10px;
}
#slider, .back, .pre {
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
.sliderimage {
width: 100%;
}
#slider img {
position: absolute;
width: 700px;
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
<img class="sliderimage activeslider" src="http://dev.hvgg.de/file_upload/data15749.jpg" id="1" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15750.jpg" id="2" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15751.jpg" id="3" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15752.jpg" id="4" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15753.jpg" id="5" />
<span class="back">◀</span>
<span class="pre">▶</span>
</div>

Position problem I have change some css property
#slider {
float: left;
width: 700px;
height: 233px;
position: relative;
}
.back, .pre {
background-color: #EB5A00;
opacity: 1;
color: #FFF;
font-size: 25px;
position: absolute;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
}
.back {
left: 0;
margin-left: 10px;
top: 50%;
}
.pre {
margin-right: 10px;
right: 0;
top: 50%;
}
#slider, .back, .pre {
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
.sliderimage {
width: 100%;
}
#slider img {
position: absolute;
width: 700px;
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
http://jsfiddle.net/ogm967bz/1/

I have tweaked your CSS a bit of .back, .pre
$(document).ready(function(){
hideArrows();
hideImages();
$(".back").click(function(){prevImage()});
$(".pre").click(function(){nextImage()});
$("#slider").mouseenter(function(){
//showArrows();
$(".back").show();
$(".pre").show();
})
$("#slider").mouseleave(function(){
//hideArrows();
$(".back").hide();
$(".pre") .hide();
})
start();
});
function hideArrows(){
$(".back").hide();
$(".pre") .hide();
}
function showArrows(){
$(".back").show();
$(".pre") .show();
}
function hideImages(){
$("#2").hide();
$("#3").hide();
$("#4").hide();
$("#5").hide();
}
function start(){
// save when we started for calculating progress
var startedAt = Date.now();
// set animation bounds
var startValue = 1;
var endValue = 100;
// figure out how much change we have over the whole animation
var delta = endValue - startValue;
// Animation function, to run at 60 fps.
t = setInterval(function(){
// How far are we into the animation, on a scale of 0 to 1.
var progress = (Date.now() - startedAt) / 5000;
// If we passed 1, the animation is over so clean up.
if (progress > 1) {
nextImage();
}
}, 1000 / 60);
}
function prevImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) - 1;
if(next < 1){next = 5}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
function nextImage(){
var id = document.getElementsByClassName("activeslider")[0].id;
var next = parseInt(id) + 1;
if(next > 5){next = 1}
next = "#" + next.toString();
id = "#" + id.toString();
$(id).removeClass("activeslider").fadeOut();
$(next).addClass("activeslider").fadeIn();
clearInterval(t);
start();
}
#slider {
float: left;
width: 700px;
height: 233px;
}
.back, .pre {
background-color: #EB5A00;
opacity: 1;
top: 92px; /* Chnages here */
color: #FFF;
font-size: 25px;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
position:absolute; /* Chnages here */
}
.back {
float: left;
left: 10px; /* Chnages here */
}
.pre {
float: right;
right: 10px; /* Chnages here */
}
#slider, .back, .pre {
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
.sliderimage {
width: 100%;
}
#slider img {
position: absolute;
width: 700px;
-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
<img class="sliderimage activeslider" src="http://dev.hvgg.de/file_upload/data15749.jpg" id="1" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15750.jpg" id="2" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15751.jpg" id="3" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15752.jpg" id="4" />
<img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15753.jpg" id="5" />
<span class="back">◀</span>
<span class="pre">▶</span>
</div>

Refer : http://jsfiddle.net/ogm967bz/8/
add the following css in the file
position:relative;
under the
.back, .pre {
background-color: #EB5A00;
opacity: 1;
margin-top: 92px;
color: #FFF;
font-size: 25px;
text-align: center;
padding: 12.5px 7.5px;
cursor: pointer;
z-index: 1001;
cursor: pointer;
position:relative;
}

A javascript slider array issue

Having a slider with images implementation from array, cant figure out why images dont want to be shown up from array, tryed to make a path but it didnt work.I want this code to reflect this image every time a push the button: fpoimg.com/100x100.
Im trying to fix it only with clean javascript.
Here is a sandbox
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame:0,
set:function(image){
path = path || 'http://fpoimg.com/';
document.getElementById('scr').style.backgroundImage ="url ("+path+ image+")";
},
init:function() {
this.set(this.slides[this.frame]);
},
left:function() {
this.frame--;
if(frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right:function() {
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
},5000);
};
.scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background:none;
border:none;
}
.left {
left:25px;
}
.right {
right:25px;
}
<body>
<button class="left" onclick="slider.left();"><</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();">></button>
</body>

On Line 6 of your Javascript, you have used getElementById('scr'). You have no element with an Id or scr, you needed to use getElementsByClassName('scr')
Your new code:
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame: 0,
set: function(image) {
path = path || 'http://fpoimg.com/';
document.getElementsByClassName('scr').style.backgroundImage = "url (" + path + image + ")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if (frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right: function() {
if (this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
}, 5000);
};
.scr {
margin: 20px auto;
width: 600px;
height: 320px;
margin-top: 20px;
background-color: white;
background-size: cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background: none;
border: none;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
<body>
<button class="left" onclick="slider.left();">
</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();"></button>
</body>

It seems you've got getElementById() when you meant getElementsByClassName()