I am developing a Binary Tree Search visualization program using JSAV library. The problem is that all the nodes are getting highlighted instantly and I want to show it step by step without any pressing of button again and again.
I tried to highlight a node and use timeout function to stop the execution for few seconds and then unhighlight the node and then proceed with next selected node, however there is no effect at all. Can anybody suggest me what can I do to modify my program to incorporate this type of feature?
Code: (Uses JSAV library)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/JSAV.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<title>Test Binary Tree Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="lib/jquery.transit.js"></script>
<script src="lib/raphael.js"></script>
<script src="lib/JSAV.js"></script>
<Script src="lib/includeall.js"></Script>
<style>
.highlight
{
background-color: blue;
}
.unhighlight
{
background-color: white;
}
#av {
width: 98%;
position: relative;
}
.jsavcounter {
position: absolute;
top: 15px;
}
.jsavtree {
position: relative;
width: 500px;
height: 300px;
}
svg {
height: 600px;
}
path {
pointer-events: visible;
}
</style>
</head>
<body>
<div id="av">
</div>
<script>
var jsav=new JSAV("av");
var bt=jsav.ds.binarytree();
addNode(bt,20);
addNode(bt,5);
addNode(bt,40);
addNode(bt,50);
addNode(bt,60);
addNode(bt,70);
addNode(bt,4);
function donothing()
{
}
function searchBinarytree()
{
var value=parseInt(document.getElementById("value").value);
var test=bt.root();
while(test!=null)
{
test.addClass("highlight");
setTimeout(donothing,20000);
if(test.value()==value)
{
break ;
}
if(test.value()<=value)
{
test.toggleClass("unhighlight");
test=test.right();
}
else
{test.toggleClass("unhighlight");
test=test.left();
}
bt.layout();
}
}
</script>
<div id="valuebox">
Value to search:<input id="value" type="text"> <button type="button" onclick="searchBinarytree()"> Search</button>
</div>
</body>
</html>
setTimeout is calling donothing which is "doing nothing". You should instead call the function you want repeated from within setTimeout. I assume you expect it to pause at that call, but that's not how setTimeout works. More info can be found at https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
Something like this should work (not tested)
var test;
function searchBinarytree() {
test = bt.root();
test.addClass("highlight");
setTimeout(updateNode, 20000);
}
function updateNode() {
var value = parseInt(document.getElementById("value").value);
if (test != null) {
if (test.value() != value) {
test.removeClass("highlight");
if (test.value() <= value) {
test = test.right();
} else {
test = test.left();
}
if (test != null) {
test.addClass("highlight");
}
setTimeout(updateNode, 20000);
}
bt.layout();
}
}
Not really sure that it's your issue but:
When you use setTimeout use it like that
setTimeout(yourFunction, timeout);
not
setTimeout(yourFunction(), timeout);
you have to pass the function to be invoked, you don't invoke the function
Related
I have made a game using JavaScript and I would like the background to change after the game is over or after isGamerOver = true to be more specific. Here is what I currently have. Right now when ever the game ends I get a Uncaught TypeError: Cannot read property 'style' of null.
function gameOver() {
console.log('game over')
isGamerOver = true
while (grid.firstChild) {
grid.removeChild(grid.firstChild)
}
grid.innerHTML = score
clearInterval(upTimerId)
clearInterval(downTimerId)
clearInterval(leftTimerId)
clearInterval(rightTimerId)
if(isGamerOver = true){
document.getElementById("grid").style.backgroundImage="url('backgrounds/background-up.png')";
}else{
document.getElementById("grid").style.backgroundImage="url('backgrounds/game-over.png')";
}
}
Here is the style sheet I am trying to change
.grid {
width: 400px;
height: 600px;
background-image: url(backgrounds/background-up.png);
position: relative;
font-size: 100px;
text-align: center;
color: #fff;
}
Here Is my HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>100% Not Doodle Jump</title>
<link rel="stylesheet" href="style.css"></link>
<script src="app.js" charset="utf-8"></script>
</head>
<body>
<div class="grid"></div>
</body>
</html>
I also added a div in JavaScript
const grid = document.querySelector('.grid')
const doodler = document.createElement('div')
If you got your grid defined like that:
const grid = document.querySelector('.grid')
change this:
if(isGamerOver = true){
document.getElementById("grid").style.backgroundImage="url('backgrounds/background-up.png')";
}else{
document.getElementById("grid").style.backgroundImage="url('backgrounds/game-over.png')";
}
to this:
if(isGamerOver = true){
grid.style.backgroundImage="url('backgrounds/background-up.png')";
}else{
grid.style.backgroundImage="url('backgrounds/game-over.png')";
}
Im trying to write a Python code editor in browser using Skulpt to execute the Python code and Code Mirror as a text editor.
As the input function for Skulpt uses an alert for input, I have decided to write my own function. The input function I have written works and takes an input from a modal.
Sk.configure({output:outf, read:builtinRead, __future__: Sk.python3, inputfun: function (prompt) {
clearModal();
addModalQuestion(prompt);
toggleModal();
// the function returns a promise to give a result back later...
return new Promise(function(resolve,reject){
$("#modal-submit").on("click",function(e){
// resolve the promise with the value of the input field
resolve($("#modal-input").val());
})
})
}, inputfunTakesPrompt: true});
Any errors in the code are usually sent to the output pre:
For normal errors with no input I get this (which is what I want to happen):
However, when I use an input in my code no error message is output:
The errors will no longer be displayed and I receive the following error:
Does anyone have any idea how I could resolve this issue or point me in the right direction?
I've put both my skulpt.js and index.html file below if this helps.
SkulptTest.js
// output functions are configurable. This one just appends some text
// to a pre element.
function outf(text) {
var mypre = document.getElementById("output");
mypre.innerHTML = mypre.innerHTML + text;
}
function builtinRead(x) {
if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
throw "File not found: '" + x + "'";
return Sk.builtinFiles["files"][x];
}
// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() {
var prog = editor.getValue(); ;
var mypre = document.getElementById("output");
mypre.innerHTML = '';
Sk.pre = "output";
Sk.configure({output:outf, read:builtinRead, __future__: Sk.python3, inputfun: function (prompt) {
clearModal();
addModalQuestion(prompt);
toggleModal();
// the function returns a promise to give a result back later...
return new Promise(function(resolve,reject){
$("#modal-submit").on("click",function(e){
// resolve the promise with the value of the input field
resolve($("#modal-input").val());
})
})
}, inputfunTakesPrompt: true});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
try {
if (result = Sk.importMainWithBody("<stdin>", false, prog, true)) {
return result;
}
}
catch(e) {
outf(e.toString());
}
});
;
}
index.html
<!DOCTYPE html>
<html>
<head>
<!--JQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<!--Skulpt-->
<script src="skulpt/skulpt.min.js" type="text/javascript"></script>
<script src="skulpt/skulpt-stdlib.js" type="text/javascript"></script>
<!--Code Mirror-->
<script src="codemirror/lib/codemirror.js"></script>
<link href="codemirror/lib/codemirror.css" rel="stylesheet">
<script src="codemirror/mode/python/python.js"></script>
<link href="codemirror/theme/midnight.css" rel="stylesheet">
<!--My Styles-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Input</title>
<meta name="description" content="How do we input data in Python 3?">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<style>
#editor-container {
width: 100vw;
height: 47vh;
}
#run-container {
width: 100vw;
height: 5vh;
background-color: #0a121f;
}
#run-container button {
float: right;
height: 5vh;
width: 15%;
background-color: yellow;
border: none;
border-radius: 5px;
}
#output-container {
width: calc(100vw - 10px);
height: calc(45vh - 10px);
background-color: aliceblue;
float: right;
background-color: #000;
color: #fff;
padding-left: 10px;
padding-top: 10px;
}
#output {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>
<!--Modal-->
<link href="css/modal.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Skulp-->
<script src="skulptTest.js"></script>
<!--My Code-->
<div id="right-panel">
<div id="editor-container">
<div class="modal" id="modal">
<div class="modal-content">
<span class="close-button"></span>
<p id="modal-question" class="modal-question">Input Prompt</p>
<input type="text" id="modal-input" name="modal-input" class="modal-input">
<button id="modal-submit" class="modal-submit" onclick="toggleModal()">Submit</button>
</div>
</div>
<textarea id="editor"></textarea>
</div>
<div id="run-container">
<button type="button" onclick="runit()">Run</button>
</div>
</div>
<div id="output-container">
<pre id="output"></pre>
</div>
<!-- Code Mirror-->
<script src="js/code-mirror.js"></script>
<script>editor.setValue("name = input('What is your name?')\nprint(name)");</script>
</body>
</html>
<script src="js/modal.js"></script>
I've also attached a link to all of the files below.
Code Editor Files
If anyone could help me with this I'd really appreciate it
Thanks in advance,
Sean
I tried searching for "file name changes to 0 in browser" both in Google and here, but got nowhere. This is a simple file which suddenly stopped opening. I can't even get at the inspector to troubleshoot it. Undo/redo history is lost, so that will not help. I'm guessing it's a simple mistake, but I have NEVER seen this before.
<!doctype html>
<html lang="en">
<head>
<title>JS Animated Navigation Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
<!--
var location = 0;
var bar = document.getElementById("bar1");
function myMove()
{
// if (id != 0) clearInterval(id);
location = -144;
// if (location != -144) return; // don't execute onmouseover while previous onmouseover is still running.
id = setInterval(move, 1);
}
function move()
{
location++;
bar.style.left = location + 'px';
if (location == 300)
{
clearInterval(id);
id = setInterval(moveback, 1);
}
}
function moveback()
{
location--;
bar.style.left = location + 'px';
if (location == -144)
{
clearInterval(id);
// id = setInterval(move, 1);
}
}
-->
</script>
<style>
#container
{
width: 600px;
height: 100px;
position: relative;
background: white;
}
#bar1
{
width: 150px;
height: 30px;
position: absolute;
left: -144px;
background-color: white;
}
</style>
</head>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="container">
<div id ="animate"><img src="imageGalleryBar.png" alt="Image Gallery" width="150" height="30" id="bar1" onmouseover="myMove()" /></div>
</div>
</body>
</html>
Thank you
You can't use the variable name location as it is a reserved word; what you're actually doing is setting the window.location variable to 0.
Rename it, or put it in a namespace or object.
If you run this code snippet you will see a button. If you click on it, it will rotate. I have the exact same code in Visual Studio (as you can see in the picture below). However, when i debug the code or press 'view in browser (Google Chrome)' it doesn't work at all.
$("#rotate").click(function () {
if ($(this).css("transform") == 'none') {
$(this).css("transform", "rotate(45deg)");
} else {
$(this).css("transform", "");
}
});
body {
}
#rotate {
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/css.css" />
<script src="scripts/jquery-2.1.1.js"></script>
<script src="scripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button id="rotate"></button>
</body>
</html>
Did you wrap your button binding inside $(document).ready(function () { });? That is not clear from your example because it works fine if it is.
Or place your javascript code beneath the button without the &(document).ready function, that also works because if it is above the button the browser will try to bind a button that does not exits yet.
<script>
$(document).ready(function () {
$("#rotate").click(function () {
if ($(this).css("transform") == 'none') {
$(this).css("transform", "rotate(45deg)");
} else {
$(this).css("transform", "");
}
});
});
</script>
<style>
#rotate {
width: 100px;
height: 30px;
}
</style>
<button id="rotate" type="button">button</button>
The javascript, html and css work in this jsfiddle
but when entered into an html file like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var target = $(".mypara").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
alert("made it!");
clearInterval(interval);
}
}, 250);
</script>
<style>
body {
background-color: linen;
height: 1000px;
}
p {
color: blue;
margin-top: 500px;
}
</style>
</head>
<body>
<p class="mypara">asdfasdfasf</p>
</body>
</html>
chrome console gives this error
Uncaught TypeError: Cannot read property 'top' of undefined(anonymous function) # index - Copy.html:8
This error refers to line 8:
var target = $(".mypara").offset().top;
Can someone help me understand why?
Wrap your code in
$(document).ready (function (){
// code here
});
You're trying to access an element in the DOM before it exists so when your trying to access the class the item doesnt exist yet. Or move your script below the elements in the html
Works in fiddle cause thet wrap you're code depending on your setting which defaults to domready I believe
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<style>
body {
background-color: linen;
height: 1000px;
}
p {
color: blue;
margin-top: 500px;
}
</style>
</head>
<body>
<p class="mypara">asdfasdfasf</p>
<p class="mypara">Include js files to be at the bottom so that it would be the one to be loaded accordingly</p>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
// if document is ready then
// its the only time to execute
// process withing the block
$(document).ready(function() {
var target = $(".mypara").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
alert("made it!");
clearInterval(interval);
}
}, 250);
});
</script>
</body>
</html>