I'm trying to implement a slider using Javascript only (no external libraries like jQuery).
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<script language="javascript" type="text/javascript" src="slider.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container main-container">
<div id="container">
<img id='slider-img' src='images/img1.png'>
<div id='left_holder'><img onclick="slider(-1)" class='left' src="images/arrow_left.png"></div>
<div id='right_holder'><img onclick="slider(1)" class='right' src="images/arrow_right.png"></div>
</div>
</div>
</body>
</html>
JS slider file:
(function() {
slider();
})();
function slider(element) {
var imagecount = 1;
var totalimage = 11;
var image = document.getElementById("slider-img");
imagecount = imagecount + element;
image.src = "images/img" + imagecount + ".png";
}
I'm getting an error at image.src cannot set property src of null because document.getElementById("slider-img"); can't get the element img of the html code. Anybody have some insight on this issue?
var imagecount = 1;
function slider(element) {
var totalimage = 11;
var image = document.getElementById("slider-img");
imagecount = imagecount < totalimage ? imagecount + Number(element) : 1;
if (imagecount < 1) {
imagecount = 1;
};
image.src = "images/img" + imagecount + ".png";
console.log(imagecount)
}
window.onload = function() {
slider(0)
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<script language="javascript" type="text/javascript" src="slider.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container main-container">
<div id="container">
<img id='slider-img' src='images/img1.png'>
<div id='left_holder'>
<img onclick="slider(-1)" class='left' src="images/arrow_left.png">
</div>
<div id='right_holder'>
<img onclick="slider(1)" class='right' src="images/arrow_right.png">
</div>
</div>
</div>
</body>
</html>
change your markup so that the script is loaded right before the body ends
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container main-container">
<div id="container">
<img id='slider-img' src='images/img1.png'>
<div id='left_holder'><img onclick="slider(-1)" class='left' src="images/arrow_left.png"></div>
<div id='right_holder'><img onclick="slider(1)" class='right' src="images/arrow_right.png"></div>
</div>
</div>
<script language="javascript" type="text/javascript" src="slider.js"></script>
</body>
</html>
so all the html is parsed when your script is executed
You can use the document.ready snippet from this answer:
What is the non-jQuery equivalent of '$(document).ready()'?
In your case:
function slider(element) {
var imagecount = 1;
var totalimage = 11;
var image = document.getElementById("slider-img");
imagecount = imagecount + element;
image.src = "images/img" + imagecount + ".png";
}
document.attachEvent("onreadystatechange", function(){
if (document.readyState === "complete"){
document.detachEvent( "onreadystatechange", arguments.callee );
slider();
}
});
Related
I just started using three.js, but I had a problem in the library, I included everything on HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>spacemen</title>
<link rel="stylesheet" href="style.css">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>
<script src="https://baronwatts.com/scripts/LegacyJSONLoader.js"></script>
<script src="https://unpkg.com/three#0.126.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<!-- processing -->
<script type="text/javascript" src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
<!-- shaders -->
<script type="text/javascript" src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/shaders/HorizontalTiltShiftShader.js"></script>
<!-- https://github.com/a-jie/threejs-geometry-modifiers -->
<script type="text/javascript" src="http://unpkg.com/three.modifiers#2.1.0"></script>
<!-- cannon -->
<script src="https://cdn.rawgit.com/schteppe/cannon.js/master/build/cannon.js"></script>
<div id="info"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
and even that i got a problem said that THREE.ShaderPass is not a constructor :
main.js:426 Uncaught TypeError: THREE.ShaderPass is not a constructor
at main.js:426:13
here is the part of this problem in the JS file :
var SCALE = 2;
var hTilt = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);
hTilt.enabled = false;
hTilt.uniforms.h.value = 4 / (SCALE * window.innerHeight);
var renderPass = new THREE.RenderPass(scene, camera);
var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(hTilt);
composer.addPass(effectCopy);
New to javascript, and I am attempting to make text appear below an image when the user mouses over it. For the HTML, I have created an empty sub tag with the id 'subtext' () below two images, and I am attempting to use a for loop, and if else statement to have a specific message occupy the subtext depending on which image is experiencing "mouseover".
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
</head>
<script>
document.addEventListener('DOMContentLoaded', function() {
let picture = document.querySelectorAll('.picture');
for (let i = 0; i <picture.length; i++) {
picture.addEventListener("mouseover", function () {
var text;
var pictureid = picture.getElementById();
if (pictureid === '#pic1') {
text = 'First response';
} else {
text = 'Second response';
}
document.getElementById('#subtext').innerHTML = text;
}
)};
});
</script>
<body>
<img src="IMG_1.jpg" width="300" height="400" class = picture id="pic1">
<img src="IMG_2.jpg" width="300" height="400" class = picture id ="pic2">
<sub id="subtext"></sub>
</body>
</html>
See here for error message - that I am missing a semicolon and have an unnecessary one at the same time
Your js code contains errors. Also, in the html structure, you did not wrap the class names in quotation marks. Like that:
class = picture
instead of for, I used the forEach() method in which I determined the current image:
picture.forEach(function (picture_current, index) {
picture_current.addEventListener("mouseover", function () {
...
document.addEventListener('DOMContentLoaded', function () {
let picture = document.querySelectorAll('.picture');
picture.forEach(function (picture_current, index) {
picture_current.addEventListener("mouseover", function () {
var text;
var pictureid = this.getAttribute('id');
if (pictureid === 'pic1') {
text = 'First response';
} else {
text = 'Second response';
}
document.querySelector('#subtext').innerHTML = text;
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<img src="IMG_1.jpg" width="300" height="400" class="picture" id="pic1">
<img src="IMG_2.jpg" width="300" height="400" class="picture" id ="pic2">
<sub id="subtext"></sub>
</body>
</html>
a couple of typos but biggest problem was querySelectorAll returns an array
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<img src="IMG_1.jpg" width="300" height="400" class = picture id="pic1">
<img src="IMG_2.jpg" width="300" height="400" class = picture id ="pic2">
<sub id="subtext"></sub>
<script>
document.addEventListener('DOMContentLoaded', function() {
let picture = document.querySelectorAll('.picture');
for (let i = 0; i <picture.length; i++) {
picture[i].addEventListener("mouseover", function () {
var text;
var pictureid = picture[i].id;
if (pictureid === 'pic1') {
text = 'First response';
} else {
text = 'Second response';
}
document.getElementById('subtext').innerHTML = text;
}
)};
});
</script>
</body>
</html>
I'm new to Javascript and I made several square boxes with a div and dots(svg) on top of them,
and I would like to number these divs by div id in a for loop by making an array.
How should I fix my code?
//Javascript
//create a 12 dotBoxes spread evenly across the window
function getGridAreaSize(){
$('#grid-area').width($(window).width() * .5);
}
function getBoxSize(){
var boxWidth = $('#grid-area').width() / 5;
return boxWidth;
};
function createBoxes(){
for (i = 0; i < 15; i++) {
// divsToAppend += '<div id="div' + (++i) + '" />';
// arrayDiv[i] = document.createElement('div');
// arrayDiv[i].id = 'dot' + i;
// arrayDiv[i].className = 'dotBox';
// document.getElementById('#grid').appendChild(arrayDiv[i].id);
// document.getElementById(arrayDiv[i].id).appendChild(dotarea);
// document.getElementById('#dotarea').appendChild(dot);
$('#grid').append("<div class='dotBox'><div class='dotarea'><div class='dot'></div></div></div>");
$('.dotBox').css('width',getBoxSize());
$('.dotBox').css('height',getBoxSize());
};
};
getGridAreaSize();
getBoxSize();
createBoxes();
//html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--FONTS-->
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Work+Sans:100,300,700' rel='stylesheet' type='text/css'>
<!--STYLESHEETS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/global.css" type="text/css" />
<!--SCRIPTS-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"> </script>-->
</head>
<body>
<svg id="canvas" width="100%" height="100%">
<line class="line original" x1="0" y1="0" x2="0" y2="0" />
</svg>
<div class="container-fluid">
<div class="splash">
<h1>Hello! My name is Soheum Hwang</h1>
<h2>Hover over each dot to see my work!</h2>
<br>
<p id="mobile-warning"> Sorry - this kind of functionality sucks on mobile! Please view it on a desktop for best results. </p>
</div>
</div>
<div id="grid-area">
<div id="grid">
<div id="popup">
<p>some text here</p>
</div>
</div>
</div>
<script src="scripts/dots.js"></script>
</body>
</html>
I want to have different texts hover on top of different boxes, so I tried to make an array of them which doesn't work..
append i too while appending it to div i.e
$('#grid').append("<div class='dotBox' id='box_"+i+"'><div class='dotarea'><div class='dot'></div></div></div>");
The problem probably lies on two events: onload, onclick (the event onload does work, but the onclick does not). How could I solve this problem in a best way to keep two of them running in the same code? Thanks for any suggestions.
const vacationPlaces = ['Praha','Vien','Munich'];
function backwards() {
for (let vacationSpotIndex = vacationPlaces.length - 1; vacationSpotIndex >= 0; vacationSpotIndex--) {
let showPlaces = vacationPlaces[vacationSpotIndex] + ", ";
let removeComma = showPlaces;
document.getElementById("resultMonthly").innerHTML += removeComma;
}
}
function forwards() {
for (let i = 0; i < vacationPlaces.length; i++) {
document.getElementById("resultDaily").innerHTML += vacationPlaces[i] + ", ";
}
}
function all() {
backwards();
forwards();
}
function click() {
document.getElementById("resultHourly").innerHTML = "hi";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body onload="all()">
<div class="container">
<h2>for loop</h2>
<div class="alert alert-success" role="alert" id="resultMonthly">
</div>
<div class="alert alert-info" role="alert" id="resultDaily">
</div>
<div onclick="click()" class="alert alert-warning" role="alert" id="resultHourly">
</div>
</div>
<!-- Scripts -->
<script src="http://chancejs.com/chance.min.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="forloop.js"></script>
</body>
</html>
In the context of the onclick attribute, the function click is a native function. So your click handler is working, but it's calling the built-in click function, not your click function. You can fix that by renaming the function. For example, I named it showAlert:
const vacationPlaces = ['Praha','Vien','Munich'];
function backwards() {
for (let vacationSpotIndex = vacationPlaces.length - 1; vacationSpotIndex >= 0; vacationSpotIndex--) {
let showPlaces = vacationPlaces[vacationSpotIndex] + ", ";
let removeComma = showPlaces;
document.getElementById("resultMonthly").innerHTML += removeComma;
}
}
function forwards() {
for (let i = 0; i < vacationPlaces.length; i++) {
document.getElementById("resultDaily").innerHTML += vacationPlaces[i] + ", ";
}
}
function all() {
backwards();
forwards();
}
function showAlert() {
console.log('clicked')
document.getElementById("resultHourly").innerHTML = "hi";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"crossorigin="anonymous">
<!-- Scripts -->
<script src="http://chancejs.com/chance.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="forloop.js"></script> -->
</head>
<body onload="all()">
<div class="container">
<h2>for loop</h2>
<div class="alert alert-success" role="alert" id="resultMonthly"></div>
<div class="alert alert-info" role="alert" id="resultDaily"></div>
<div onclick="showAlert()" class="alert alert-warning" role="alert" id="resultHourly"></div>
</div>
</body>
</html>
I'm new for Angular and trying to do one exercise and result is not showing on browser.
(function() {
var app = angular.module('bus', []);
app.controller('BusContorller', function() {
this.busbarnd = basname;
});
var basname = {
name: 'tata',
yearprod: 2000,
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- container -->
<div class="container" ng-app="bus">
<!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<!-- Call controller -->
<div ng-controller="BusContorller as bus">
<p>Bus name : {{bus.busbarnd.name}}</p>
</div>
<!--// Call controller -->
</div>
</div>
<!-- // row end -->
</div>
<!-- // container -->
Kindly let me know what I'm doing wrong. I'm thinking I'm making mistake in calling controller.
Try like below
<!DOCTYPE html>
<html ng-app="bus">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<script>
var app = angular.module('bus',[]);
app.controller('BusContorller', function($scope){
$scope.busbarnd = $scope.basname;
$scope.basname = {
name: 'tata',
yearprod: 2000,
}
});
</script>
<body ng-controller="BusContorller">
<div ng-controller="BusContorller as bus">
<p>Bus name : {{busbarnd.name}}</p>
</div>
</body>
</html>