Adding and Removing Elements (Using Tickers)

Adding and Removing Elements (Using Tickers) - javascript

I am having a hard time adding another object with tickers. I am trying to get eqn2 (i.e. 3+2=some input) to move down with the response() function. You can see in the response() function that the alert "New Question" is being called onto the screen correctly. The goal here is to have m=2 (it was at 1 before) so that the drop(2) gets called moving eqn2 down. I think the issue is that the ticker doesn't go back far enough to recognize obj[m].x = Math.random()*can.width that obj[m].y = 0.5. I don't know how to get it to work here, and any help would be much appreciated.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1j" />
</div>
<div id="eqn2"> 3+2=<input type="text" id="q2j" />
</div>
<button id="myBtn" onclick="response()">New Question</button>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
function response(){
alert("New Question");
document.getElementById(`eqn${m}`).remove();
m=m+1;
stage.update();
}
const quest=[];
quest[m]= document.getElementById(`q${m}j`);
quest[m].addEventListener("keyup", function(event) {
if (event.keyCode === 13 ) {
document.getElementById("myBtn").click();
event.preventDefault();
}
});
const values = [];
values[m] = document.getElementById(`q${m}j`);
var stage = new createjs.Stage("gameCanvas");
var obj=[];
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
can = document.getElementById("gameCanvas");
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
function startGame() {
stage.addChild(obj[m]);
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(1);
function handleTick(event){
drop(m);
stage.update();
}
}
function drop(i){
obj[i].x += 1;
obj[i].y +=3;
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
</html>

This isn't really a ticker question. You have to redefine the variables you need in the response function before the ticker.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1j" />
</div>
<div id="eqn2"> 3+2=<input type="text" id="q2j" />
</div>
<div id="eqn3"> 5+2=<input type="text" id="q3j" />
</div>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
var quest=[];
quest[m]= document.getElementById(`q${m}j`);
var values = [];
var stage = new createjs.Stage("gameCanvas");
var obj=[];
can = document.getElementById("gameCanvas");
function response(){
alert("New Question");
document.getElementById(`eqn${m}`).remove();
m=m+1;
quest[m] = document.getElementById(`q${m}j`);
quest[m].addEventListener("keyup", enterFunction);
values[m] = document.getElementById(`q${m}j`);
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
stage.addChild(obj[m]);
}
function startGame() {
quest[m].addEventListener("keyup", enterFunction);
values[m] = document.getElementById(`q${m}j`);
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
stage.addChild(obj[m]);
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(2);
function handleTick(event){
drop(m);
stage.update();
}
}
function drop(i){
obj[i].x += 1;
obj[i].y +=3;
}
function enterFunction(){
if (event.keyCode === 13 ) {
document.getElementById("myBtn").click();
}
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
<button id="myBtn" onclick="response()">New Question</button>
</html>

Related

How do I fix my SideBar to open and close?

I am trying to get a SideNav to open and close affter pressing a button. However, I can only get it to close. When I pass the sideNave() function to button.addEventListener("click", ... ) nothing happens. I would appriciate your help a lot! My code bellow:
const left = document.querySelector("left");
const right = document.querySelector("right");
const button = document.querySelector("button");
button.addEventListener("click", close);
const x = true;
function close() {
document.getElementById("left").style.width = "0";
document.getElementById("right").style.width = "100%";
x = false;
}
function open() {
document.getElementById("left").style.width = "15%";
document.getElementById("right").style.width = "85%";
x = true;
}
function sideNav() {
if (x = true) {
w3_close();
} else {
open();
}
}
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="webPage.css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/62ea397d3a.js" crossorigin="annonymous"></script>
</head>
<body>
<div class="header"></div>
<div id="left">
<button class="button">Click Me!</button>
</div>
<div id="right">
<p></p>
</div>
</body>
</html>

Click on the ☰ symbol to open the sidebar (overlays some of the page content). function w3_open () { document.getElementById("mySidebar").style.display = "block"; } function w3_close () {

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>

Unable to draw image on canvas from image dataurl (Easeljs)

I am trying to draw an image on canvas from dataurl but nothing is showing up on the canvas. For testing purpose, I have two canvases. I am drawing an image using url on first canvas (which loads correctly) and then converting it into dataurl and drawing the dataurl in second canvas which fails to draw.
Below is my code:
test html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap.min.css" rel="stylesheet">
<title>Something</title>
</head>
<body>
<div class="col-md-8" id="middle panel">
<div class="container-fluid">
<div class="row">
<canvas class="embed-responsive-item" id="docCanvas" height="800" width="1200"></canvas>
</div>
<!-- Middle Panel-Container-Row (Editor) -->
<div class="row">
<canvas class="embed-responsive-item" id="docCanvasNew" height="1000" width="1500"></canvas>
</div>
<!-- Middle Panel-Container-Row (Editor) -->
</div>
<!-- Middle Panel-Container -->
</div>
<div class="col-md-4" id="signWidget">
<p>Boot</p>
</div>
<br>
<!-- <canvas id="docCanvas" height="800" width="1200"></canvas> -->
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="easeljs-NEXT.combined.js"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<!-- <script src="signing.js"></script> -->
<script src="ease.js"></script>
</body>
test js
var canvas, stage;
var canvas_new, stage_new;
var offset;
var update = true;
var uri;
var uri_new;
$(function() {
function init() {
// create stage and point it to the canvas:
canvas = document.getElementById("docCanvas");
stage = new createjs.Stage(canvas);
canvas_new = document.getElementById("docCanvasNew");
stage_new = new createjs.Stage(canvas_new);
// enable touch interactions if supported on the current device:
createjs.Touch.enable(stage);
// enabled mouse over / out events
stage.enableMouseOver(10);
stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas
// load document image
var docImage = new Image();
docImage.src = "new_editor_filled.png";
docImage.onload = handleDocImageLoad;
}
init();
function stop() {
createjs.Ticker.removeEventListener("tick", tick);
}
function handleDocImageLoad(event) {
var image = event.target;
var bitmap;
var container = new createjs.Container();
stage.addChild(container);
bitmap = new createjs.Bitmap(image);
container.addChild(bitmap);
bitmap.x = 0 | 0;
bitmap.y = 0 | 0;
createjs.Ticker.addEventListener("tick", tick);
uri = canvas.toDataURL();
//uri_new = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '');
var docImageNew = new Image();
docImageNew.onload = handleDocImageLoadNew;
docImageNew.src = uri;
}
function handleDocImageLoadNew(event) {
var image = event.target;
var bitmap;
var container = new createjs.Container();
stage_new.addChild(container);
bitmap = new createjs.Bitmap(image);
container.addChild(bitmap);
bitmap.x = 100 | 0;
bitmap.y = 100 | 0;
stage_new.update();
//update = true;
//createjs.Ticker.addEventListener("tick", tick);
}
function tick(event) {
// this set makes it so the stage only re-renders when an event handler indicates a change has happened.
if (update) {
update = false; // only update once
stage.update(event);
}
}
});

Javascript/html, can't write twice in a input

I'm doing a schoolproject, trying to do an list of things you need to buy.
The problem is, i can't write more than one time and add to the list, and i can't figure out why.
(It's nowhere near done.) (i have to diffrent javascript files)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="main.css" type="text/css" rel="stylesheet">
<title>Inköpslista</title>
</head>
<body>
<div id="kol1" class="kol">
<h1>Inköp</h1>
<input type="image" src="img/button.png" alt="Submit" id="storknapp" onclick="klickaKnapp('skriva')"/>
<input type"text" id="skriva" placeholder="Skriv din vara här!"/>
<input type="image" id="knapp" src="pluss.png" alt="Submit"/>
</div>
<div id="kol2">
<ul id="listaavvara"></ul>
</div>
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
</body>
</html>
function laggtill(cool, namnVara) {
var vara = document.createElement("li");
vara.innerText = namnVara;
cool.appendChild(vara);
}
var button = document.getElementById("knapp");
button.onclick = function() {
var skriva = document.getElementById("skriva")
var namnVara = skriva.value;
if(!namnVara|| namnVara =="" || namnVara == " " ){
return false;
}
laggtill(document.getElementById("listaavvara"), namnVara);
};
javascrpit 2:
function klickaKnapp(x){
var skrivrutan = document.getElementById(x), maxH="100px";
if(skrivrutan.style.height == maxH){
skrivrutan.style.height = "0px";
} else {
skrivrutan.style.height = maxH;
}
}
HOPEFULLY YOU KNOW WHAT I MEAN! (my pictures are not here)

Because
var button = document.getElementById("knapp");
button.onclick = function() { ... }
overrides the inline event handler. You need to attach events with addEventListener
button.addEventListener("click", function(){...}, false);

Your example works for me on fiddle: http://jsfiddle.net/7zjb86ab/
So this looks like there is something wrong with your imported scripts
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
Are those the two files with your javascript snippets inside?
You could also try to replace
var button = document.getElementById("knapp");
button.onclick = function() {
with
function addItem() {
and then add the function as onclick attribute like you do with the klickaKnapp function
<input type="image" id="knapp" src="pluss.png" alt="Submit" onclick="addItem()" />

Image wont load on canvas. canvas.width error

Hey my image wont load onto the canvas. I've been at this for hours and I cant figure out what it is. I started to debug my code in google chrome and the console says canvas.width is set to null. Thats the only error I can find.
Here is my code:
function gameLoop()
{
drawBackground();
drawPlayer();
}
function drawBackground()
{
var img = new Image();
img.src = "Images/GrassTexture.png";
g.drawImage(img,0, 0, 500, 500);
}
function drawPlayer()
{
var player1 = new Image();
player1.src = "Images/Players/Mignolet.png";
g.drawImage(player1,0, 0,50 , 50);
}
setInterval(gameLoop, 1);
var canvas = document.getElementById("Canvas");
canvas.width = 500;
canvas.height = 500;
var g = canvas.getContext("2d");
html
html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<script type="text/javascript" src="Js/Js.js"></script>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
</body>
</html>
Css
#Canvas
{
border: 1px solid black;
width:500px;
height:500px;
margin-left: 300px
}

the script is being called before the html is rendered which is why you were getting the error. its always best to place scripts just before the <body> tag ends.
<html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
<script type="text/javascript" src="Js/Js.js"></script>
</body>

We Keep Coding

JavaScript is the programming language of the Web.

Adding and Removing Elements (Using Tickers) - javascript

Related

How do I fix my SideBar to open and close?

Change border height on button click in Javascript

Unable to draw image on canvas from image dataurl (Easeljs)

Javascript/html, can't write twice in a input

Image wont load on canvas. canvas.width error

Categories

Resources