Javascript can't acces to HTML(moving object left-right) - javascript

my file:
index.html
client
css
style.css
js
javascript.js
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="client/css/style.css">
<script type="text/javascript" src="client/js/javascript.js"></script>
</head>
<body>
<div id="container">
<div id="guy"></div>
</div>
</body>
</html>
javascript.js
var guy=document.getElementById('guy');
var container=document.getElementById('container');
var guyLeft=0;
function anim(e){
if(e.keyCode==39){
guyLeft +=2;
guy.style.left = guyLeft + 'px';
}
if(e.keyCode==37){
guyLeft -=2;
guy.style.left = guyLeft + 'px';
}
}
document.onkeydown =anim;
style.css
#container{
height:400px;
width:600px;
outline:1px solid black;
position: relative;
}
#guy{
position: absolute;
height:50px;
width:50px;
outline:1px solid black;
background-color:red;
left:0;
}
1)So guys pls help.. I just want to move object left and right .. when i put that code between in index.html it works but in seperate javascript.js class doesn't work. Thx for help.

1) You have to load the JavaScript at the bottom of the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="client/css/style.css">
</head>
<body>
<div id="container">
<div id="guy"></div>
</div>
<script type="text/javascript" src="client/js/javascript.js"></script>
</body>
</html>
2) Move up and down:
var guy = document.getElementById('guy');
var container = document.getElementById('container');
var guyLeft = 0;
var guyTop = 0;
function anim(e){
if(e.keyCode==39){
guyLeft +=2;
guy.style.left = guyLeft + 'px';
}
if(e.keyCode==37){
guyLeft -=2;
guy.style.left = guyLeft + 'px';
}
// UP
if(e.keyCode==38) {
guyTop -=2;
guy.style.top = guyTop + 'px';
}
// DOWN
if(e.keyCode==40) {
guyTop +=2;
guy.style.top = guyTop + 'px';
}
}
document.onkeydown = anim;
You should use the console if you want to catch bugs and errors in JavaScript.

Related

Change border height on button click in Javascript

I want the border to increase, every time I press a button.
When the button is pressed, its 'value' is increased by 1. I want the value of the pixel-height of the border of the container to increase as well.
var i = 0;
var heightOfBorder = document.getElementById('test').style;
function buttonClick() {
document.getElementById('incrementValue').value = i++
heightOfBorder = "height: 500px";;
}
// document.getElementById("test").style.height = document.getElementById('incrementValue').value;
#test {
margin-top: 200px;
border: solid black;
width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Container size change</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="main" class="container">
<div id="test" class="container" style="height: 50px;">
</div>
<button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button>
<input id="incrementValue" type="text" name="button" value="0">
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
What am I doing wrong? I am learning to code. Also, side question, does anyone know of a good mentorship program?
Greetings!
You can get current height of the box using offsetHeight and on click add the input value to the box's style.height and remember to add the unit at the end - in your case 'px'.
Here is an example:
var i = 0;
var myEl = document.querySelector('#test');
var initialHeight = myEl.offsetHeight;
function buttonClick() {
document.getElementById('incrementValue').value = i++;
myEl.style.height = initialHeight + i + 'px';
}
<script>
var i = 0;
var heightOfBorder = document.getElementById('test').style;
function buttonClick() {
document.getElementById('incrementValue').value = i++;
let currHgt = heightOfBorder.getPropertyValue('height');
currHgt = +currHgt.slice(0, currHgt.length - 2);
heightOfBorder.setProperty('height', currHgt + i + 'px');
}
</script>
If you want to change height by i value.
just change var
heightOfBorder = document.getElementById('test').style;
to
var heightOfBorder = document.getElementById('test');
and
eightOfBorder = "height: 500px";
to
eightOfBorder.style = "height: 500px";
var i = 0;
var heightOfBorder = document.getElementById('test');
function buttonClick() {
document.getElementById('incrementValue').value = i++
heightOfBorder.style = "height: 500px";
}
// document.getElementById("test").style.height = document.getElementById('incrementValue').value;
#test {
margin-top: 200px;
border: solid black;
width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Container size change</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="main" class="container">
<div id="test" class="container" style="height: 50px;">
</div>
<button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button>
<input id="incrementValue" type="text" name="button" value="0">
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>

How to get mouse position from a iframe that contains a page?

I want to get mouse position from an IFRAME that contains a HTML page .
But before Iframe HTML page load , this code work nice .
After loading Iframe HTML page , this code don't work !
Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8" />
<style>
#divid {
height: 600px;
width: 300px;
border: 2px solid black;
transform: scale(0.5, 0.5);
}
</style>
</head>
<body>
<iframe id="iframe" src="http://www.google.com/" >
</iframe>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
var iframepos = $("#iframe").position();
$('#iframe').contents().find('html').on('mousemove', function (e) {
var x = e.clientX + iframepos.left;
var y = e.clientY + iframepos.top;
console.log(x + " " + y);
})
</script>
</body>
</html>
can you help me please ?

By Jquery making divs, need them also to move up, like in a game

$(document).ready(function(){
console.log(document.getElementById("aDiv").offsetTop);
var e = document.getElementById("aDiv");
var s = 1;
setInterval(function(){
var eLeftPos = e.offsetTop;
// console.log(eLeftPos);
e.style.top = (eLeftPos - s) + 'px';
}, 200);
// Animation
(function makeDiv(){
var divsize = 30;
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>',{
"class": "bubble theRestBubbles",
"id": "bDiv"
}).css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color,
'border-radius' : 50 + "%",
// 'class' : 'bubble',
});
var posx = (Math.random() * ($(document.getElementById("mainBlock")).width())).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':370+'px',
'display':'none'
}).appendTo( '#mainBlock' ).fadeIn(1000).delay(00, function(){
// $(this).remove();
makeDiv();
});
})();
});
$(document).ready(function(){
$(".bubble").click(function(){
// $("input").append(" <b>Appended text</b>");
var x = document.getElementById("input").value;
var y = (parseInt(x, 10) || 0) + 1;
x = y;
console.log(x);
$('#input').val(x);
var currentPosition = this.offsetTop;
console.log(currentPosition);
this.style.top = "370px";
});
$(".btn-danger").click(function(){
$('#input').val("");
});
});
.bg{
height: 400px;
/*width: 400px;*/
background-color: #FFF1F1;
/*display: inline-block;*/
position: relative;
}
.bubble{
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #24E93E;
cursor: pointer;
position: absolute;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-xs-3 btnDiv">
<button type="button" class="btn btn-danger">RESET</button>
<button type="button" class="btn btn-success">PLAY</button>
</div>
<div class="col-xs-6 bg main-block" id="mainBlock">
<div class="bubble testBubble" id="aDiv"></div>
</div>
<div class="col-xs-3 score-place">
<input id="input" type="text" name="" placeholder="">
</div>
</div>
</div>
</body>
</html>
Hi All.
Here I have a div, and by Math.Random a little dives are appearing. Now I need them to go up like the one I have at the beginning of the page.
Also When I click on the first and only the second div, there is a input, and the value +1. But the trick is that after first 2 divs, on clicking the rest ones, the value of input stays the same.
Will be glad if you will tell me how to solve this problem
first of all - you're question is very unclear - so I hope I understood you.
a. you want all the divs to bubble up - so why did you use getElementById ?
this will always return only one element + you do it before the interval so it's always the same one. try:
setInterval(function(){
$('.bubble').each(function(){
var e = this;
var eLeftPos = e.offsetTop;
e.style.top = (eLeftPos - s) + 'px';
})
}, 200);
b. only clicks on the original div are counted - that is because you set the click only on load where there is only one div available. try:
$(document).ready(function(){
$('.container').on('click',".bubble",function(){ // this is the only line I changed
// $("input").append(" <b>Appended text</b>");
var x = document.getElementById("input").value;
var y = (parseInt(x, 10) || 0) + 1;
x = y;
console.log(x);
$('#input').val(x);
var currentPosition = this.offsetTop;
console.log(currentPosition);
this.style.top = "370px";
});
$(".btn-danger").click(function(){
$('#input').val("");
});
});

JavaScript TouchEvent did not work

Recently I started play with TouchEvent.
I would like to ask why this code does not work.
Why DIV "coords" does not display any result.
I used the code from:https://mobiforge.com/design-development/html5-mobile-web-touch-events
<!DOCTYPE html>
<html lang ="pl-PL">
<head>
<meta charset="utf-8"/>
<style>
#touchzone{
width:300px;
height:300px;
border:1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="coords"></div>
<div id="touchzone"></div>
<script type="text/javascript">
window.onload=function(){
function init() {
var touchzone = document.getElementById("touchzone");
touchzone.addEventListener("touchstart", touchHandler, false);
}
}
function touchHandler(event) {
var coords = document.getElementById("coords");
coords.innerHTML = 'x: ' + event.touches[0].pageX + ', y: ' + event.touches[0].pageY;
}
</script>
</body>
</html>

JavaScript animation not moving across my screen

I'm new to JavaScript and am trying to get this animation to move across the screen though to little avail , can someone help me out with my code? Added more code, im trying to get the image to move diagonally down my screen, trying to call the slowmovingmeteor() function.
Java Script
var meteoranim = new Array(6);
var curmeteor = 0;
var leftposition = 0;
var topposition = 0;
for(var t = 0; t<6; ++t){
meteoranim[t] = new Image();
meteoranim[t].src = "images/meteor" + t + ".png";
}
function meteoranimation(){
if(curmeteor == 5)
curmeteor = 0;
else
++curmeteor;
document.getElementById('meteor').src = meteoranim[curmeteor].src;
}
function slowmovingmeteor(){
var slowmeteor = document.getElementById("meteor");
slowmeteor.style.left = leftposition + "px";
slowmeteor.style.top = topposition + "px";
slowmeteor.style.visibility = "visible";
topposition += 6;
leftposition += 4;
if (topposition <= -20){
topposition = -10;
leftposition = -10;
}
if (curmeteor == 5)
curmeteor =0;
if (leftposition > 1000){
topposition = -10;
leftposition = -10;
}
else
document.getElementById('meteor').src = meteoranim[curmeteor].src;
++curmeteor
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Primordial Casino Casino</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link media="screen" href="styles/casinostyles.css" rel="stylesheet" type="text/css">
<script src="casinoAnimation.js" type="text/javascript">
</script>
</head>
<body id="wrapper" onLoad="
setInterval('caveboyanimation()', 150);
setInterval('slowmovingmeteor()', 80);
setInterval('campfireanimation()', 100);">
<header ><h1 class="casinotitle">Primordial Casino</h1>
</header>
<div>
<img class="caveboy" src="images/caveboy0.png" id="caveboy" alt="Image of a cave boy"/>
<img src="images/campfire0.png" id="firepit" alt="Image of a fire pit"/>
<img src="images/meteor0.png" id="meteor" alt="Image of a meteor"/>
<canvas width="650" height="450">
</canvas>
</div>
<div id="footer">
<p>© Primordial Casino</p>
<p>Thanks to ipicturee.com for the background image</p>
</div>
</body>
</html>

Categories