This is my code that is unfortunately not working.
It is taking value from html (600) and then dividing it (var f = 600/20). It should start onclick button (which already has onclick function).
function enemy() {
var iFrequency = 2500;
var myInterval = 0;
var e = document.getElementById('stre').innerHTML;
var f = e / 20;
function startLoop() {
if (myInterval > 0) clearInterval(myInterval); // stop
myInterval = setInterval("doSomething()", iFrequency);
}
function doSomething() {
var label = document.getElementById('wallvalue');
label.innerHTML = parseInt(label.innerHTML) + f;
document.getElementById('wallvalue').style.color = 'red';
document.getElementById('resultr').innerHTML = f;
document.getElementById('resultr').style.color = 'red';
document.getElementById('resultrc').innerHTML = f;
document.getElementById('resultrc').style.color = 'red';
}
<BUTTON class="doit" onclick="damagec(); iFrequency+=1000; startLoop(); return false;"><b>FIGHT</b></BUTTON>
Looks like youve tried to do some inheritance, but your code is not working in any way. You may do this:
function enemy(name) { // a constructor for our enemy
this.name=name;
this.iFrequency = 2500;
this.myInterval = false;
this.el=document.createElement("div");
document.body.appendChild(this.el);
this.f = 1;
}
enemy.prototype={ //functions for all enemys
startLoop:function() {
if (this.myInterval) clearInterval(this.myInterval); // stop
this.myInterval = setInterval(this.doSomething.bind(this), this.iFrequency);
},
doSomething:function () {
this.el.innerHTML = this.name+":"+(++this.f);
this.el.style.color = 'red';
}
};
var Monster=new enemy("Monster");//create a new Enemey
var button=document.createElement("button");
button.textContent="Start Monster";
document.body.appendChild(button);
button.onclick=Monster.startLoop.bind(Monster);
I managed to get it done. Thank you all for the answers!
function enemy(){
var e=600;
var f=600/20;
document.getElementById('resultr').innerHTML = f;
document.getElementById('resultr').style.color = 'red';
document.getElementById('resultrc').innerHTML = f;
document.getElementById('resultrc').style.color = 'red';
var intervalID = window.setInterval(myCallback, 3000);
function myCallback() {
var label = document.getElementById('wallvalue');
label.innerHTML = parseInt(label.innerHTML) + f;
document.getElementById('wallvalue').style.color = 'red';
}
}
Related
class Pairs extends Screen {
constructor() {
super();
var pair1 = null;
var nPair1;
var solution;
var rightCounter = 0;
var licao, nS;
}
pairScreen(screen, lesson, nScreen) {
var body = document.body
var nodes = xmlDoc.getElementsByTagName("PAIRS");
this.licao = lesson;
this.nS = nScreen;
this.solution = screen.getElementsByTagName("SOLUTION")[0].textContent.split(" ");
body.innerHTML = '';
Startup.h1(body, "Babel (" + languageName + ")");
Startup.hr(body);
var d = DynamicHTML.div(body, "border:3px solid black; display:table; padding:20px; margin-left:40px");
Startup.h1(d, "Match the pairs");
var p1 = Startup.p(d, "padding-left:40px; word-spacing:50px;");
Startup.text(p1, 16, " ");
Startup.text(p1, 32, " ");
var p2 = Startup.p(d, "padding-left:20px;");
var button;
var i;
var f = function(i) {
Startup.eventHandler2()
}
var original = screen.getElementsByTagName("ORIGINAL")[0].textContent;
var buttons = original.split(" ");
for (i = 0; i < buttons.length; i++) {
button = DynamicHTML.inpuButton(p1, i, buttons[i], "orangered");
Startup.eventHandler2(document.getElementById(i), "onclick", function() {
checkAnswer(buttons[i], i)
});
}
Startup.hr(body);
}
checkAnswer(pair, nPair) {
var index;
if (pair1 = null) {
pair1 = pair;
nPair1 = nPair;
} else {
for (index = 0; index < solution.length; index++) {
if (pair1 == solution[index]) {
if (index % 2 == 0 && solution[index - 1] == pair) {
DynamicHTML.play("general/right_answer.mp3");
rightCounter = rightCounter + 2;
document.getElementById(nPair).disabled = true;
document.getElementById(nPair1).disabled = true;
pair1 = null;
nPair1 = null;
} else if (solution[index + 1] == pair) {
DynamicHTML.play("general/right_answer.mp3");
rightCounter = rightCounter + 2;
document.getElementById(nPair).disabled = true;
document.getElementById(nPair1).disabled = true;
pair1 = null;
nPair1 = null;
} else {
DynamicHTML.play("general/wrong_answer.mp3");
pair1 = null;
nPair1 = null;
}
}
}
}
if (rightCounter == solution.length) {
if (xmlDoc.getElementsByTagName("LESSON")[licao].childNodes[nS + 2] != null) {
var fs = new Screen();
fs.functionScreen(licao, nS + 2);
} else fs.initialScreen();
}
}
}
Wrote this for a JavaScript project I'm working on but when I run it It says Uncaught ReferenceError: checkAnswer is not defined, I'd really appreciate if anyone knew the problem. Thank you!
P.S. Don't know if the checkAnswer function has bugs or note becausa I couldn't test it out, I will when I can run it :)
First you need to bind this at the end of this function:
Startup.eventHandler2(document.getElementById(i), "onclick", function() {
this.checkAnswer(buttons[i], i)
}.bind(this));
Basically this tells the anonymous function "hey I want this to refer to this outer class, not the function itself".
(edited)
You need to either bind checkAnswer in the constructor like-so:
class Pairs extends Screen {
constructor() {
super();
var pair1 = null;
var nPair1;
var solution;
var rightCounter = 0;
var licao, nS;
this.checkAnswer = this.checkAnswer.bind(this);
}
Or use and arrow function which gives you the exact reference to the this checkAnswer like-so:
checkAnswer = (pair, nPair) => {
//your code goes here ...
}
This way you will be able to call this.checkAnswer inside the scope of your pairScreen function or wherever you want to call the function like #Davelunny point out
My case it this:
function s () {
this.funcs = [];
this.funcs.addF = function (str) {
/* this will push a function to the funcs array, which uses getCoordX() and getPixelY() */
this.push (Function("pixelX", "var x = getCoordX(pixelX); var f = " + str + "; return getPixelY(f);"));
}
function getCoordX(a){
return 0;
}
function getPixelY(a){
return 0;
}
}
As you can see, in that array I'm adding functions that are created from strings, and those functions need do use getCoordX() and getPixelY(), which are in the s() object. When I try to access them it gives this error: Uncaught ReferenceError: getCoordX is not defined.
What should I do to make it work? Please help.
Edit 2
How i would use this code:
function s () {
this.funcs = [];
this.funcs.addF = function (str) {
/* this will push a function to the funcs array, which uses getCoordX() and getPixelY() */
this.push (Function("pixelX", "var x = getCoordX(pixelX); var f = " + str + "; return getPixelY(f);"));
}
this.drawCanvas = function() {
//some code goes here
this.drawGraph(c);
}
this.drawGraph = function (c) {
c.lineWidth = 2;
var cnt = 0; //count how many pixels have been rendered
for(var i = this.limitLeft; i < this.limitRight; i+= this.pixelwidth) {
for(var u = 0; u < this.funcs.length; u++) {
var f = this.funcs[u];
//some if statements go here
}
}
}
function getCoordX(a){
return 0;
}
function getPixelY(a){
return 0;
}
}
var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.id = "canvas";
document.body.appendChild(canvas);
var c = new Canvas("canvas");
c.funcs.addF("2*x");
c.drawCanvas();
You might do this:
function s () {
this.funcs = [];
this.funcs.addF = function (str) {
/* this will push a function to the funcs array, which uses getCoordX() and getPixelY() */
this.push (Function("pixelX", "getCoordX", "getPixelY", "var x = getCoordX(pixelX); var f = " + str + "; return getPixelY(f);"));
}
this.drawCanvas = function() {
//some code goes here
this.drawGraph(c);
}
this.drawGraph = function (c) {
c.lineWidth = 2;
var cnt = 0; //count how many pixels have been rendered
for(var i = this.limitLeft; i < this.limitRight; i+= this.pixelwidth) {
for(var u = 0; u < this.funcs.length; u++) {
var f = this.funcs[u];
var currvalue = f(i, getCoordX, getPixelY);
var lastvalue = f(i-1, getCoordX, getPixelY);
//some if statements go here
}
}
}
function getCoordX(a){
return 0;
}
function getPixelY(a){
return 0;
}
}
var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.id = "canvas";
document.body.appendChild(canvas);
var c = new Canvas("canvas");
c.funcs.addF("2*x");
c.drawCanvas();
This will do it. Hope this helps ;)
this isn't implicit in JavaScript, you must precise it.
Also don't use a string to create a function, just use
this.funcs.addF = function (str) {
var obj = this;
/* this will push a function to the funcs array, which uses getCoordX() and getPixelY() */
this.push (function(pixelX){
var x = obj.getCoordX(pixelX);
return obj.getPixelY(str);
});
}
The problem is that the Function constructor creates functions which run in the global scope. So your function can't access your getCoordX in the closure.
You could make getCoordX and getPixelY global functions:
function getCoordX(a) {
return a;
}
function getPixelY(a) {
return a;
}
function s() {
this.funcs = [];
this.funcs.addF = function (str) {
this.push(new Function("pixelX",
"var x = getCoordX(pixelX);" +
"var f = " + str + ";" +
"return getPixelY(f);"
));
};
}
var obj = new s();
obj.funcs.addF('x*3 + 5');
console.log(obj.funcs[0](1)); // 8
Alternatively, you could use the Function constructor only to evaluate str, and move the other code outside.
function s() {
this.funcs = [];
this.funcs.addF = function (str) {
var f = new Function('x', 'return ' + str);
this.push(function(pixelX) {
var x = getCoordX(pixelX);
return getPixelY(f(x));
});
};
function getCoordX(a) {
return a;
}
function getPixelY(a) {
return a;
}
}
var obj = new s();
obj.funcs.addF('x*3 + 5');
console.log(obj.funcs[0](1)); // 8
Here you have a full example with canvas:
function s() {
this.funcs = [];
this.funcs.addF = function (str) {
var f = new Function('x', 'return ' + str);
this.push(function(pixelX) {
var x = getCoordX(pixelX);
return getPixelY(f(x));
});
};
this.drawGraph = function(c) {
c.lineWidth = 2;
for(var u = 0; u < this.funcs.length; u++) {
var f = this.funcs[u];
c.beginPath();
c.moveTo(0, 200-f(0));
for(var x=1; x<400; ++x) c.lineTo(x, 200-f(x));
c.stroke();
}
};
function getCoordX(a) {
return a;
}
function getPixelY(a) {
return a;
}
}
var canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 200;
document.body.appendChild(canvas);
var c = new s("canvas");
c.funcs.addF(".5*x");
c.funcs.addF("x + 50");
c.funcs.addF("3*x + 100");
c.drawGraph(canvas.getContext('2d'));
function rblSelectedValue() {
var radio = document.getElementsByName('rblInterview');
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked == true) {
// document.getElementById('txt1').value = radio[i].value;
var value1 = radio[i].value
var radio1 = document.getElementsByName('rblPrefBatch');
radio1[i].value = value1;
radio1[i].checked = true;
// alert(radio[i].value);
}
}
}
function ForNext(ctrlid)
{
var DdlYear = document.getElementById("<%= DdlYear.ClientID %>")
if (document.getElementById(ctrlid).checked)
{
document.getElementById('<%=PanelView.ClientID %>').style.visibility = 'visible';
// rblSelectedValue();
document.getElementById('<%=txtpreYearofAppearing.ClientID%>').value = document.getElementById('<%=txtYearofAppearing.ClientID%>').value;
document.getElementById('<%=txtpreupscrollno.ClientID%>').value = document.getElementById('<%=txtRollno.ClientID%>').value;
document.getElementById('<%=txtaddidpre.ClientID%>').value = document.getElementById('<%=txtAddID.ClientID%>').value;
document.getElementById('<%=txtaddyearpre.ClientID%>').value = document.getElementById('<%=DdlYear.ClientID%>').value;
document.getElementById('<%=txtpreNoOfAttempt2009.ClientID%>').value = document.getElementById('<%=txtNoOfPrevAttempts.ClientID%>').value;
document.getElementById('<%=txtPrePrelim.ClientID%>').value = document.getElementById('<%=txtPrelimi.ClientID%>').value;
document.getElementById('<%=txtpremain.ClientID%>').value = document.getElementById('<%=txtMain.ClientID%>').value;
document.getElementById('<%=txtpregs.ClientID%>').value = document.getElementById('<%=txtGS.ClientID%>').value;
document.getElementById('<%=txtpreopt.ClientID%>').value = document.getElementById('<%=txtOptional.ClientID%>').value;
document.getElementById('<%=rblPreint.ClientID%>').value = document.getElementById('<%=rblInterview.ClientID%>').value;
document.getElementById('<%=txtpreother.ClientID%>').value = document.getElementById('<%=txtCorseothers.ClientID%>').value;
}
else
{
document.getElementById('<%=PanelView.ClientID %>').style.visibility = 'hidden';
}
}
its a simple function call like
rblSelectedValue();
but just include both javascript file in html page.
function one(){
//code
}
function two(){
//more code
one(); //calling function "one"
}
I have 5 spinners which are almost working perfectly, there is just one little glitch I cannot overcome.
What is suppose to happen is that if a spinner is blank, whatever the previous number was in THAT spinner, it will display that previous number.
Instead what it is doing is that any previous number that has been entered in ANY of the 5 spinners, it displays that number in the blank spinner.
So how can I get it so that it displays the previous number from that spinner if a spinner is blank rather than displaying the last previous number entered from any spinner in the blank spinner?
Below is my spinner code:
function Spinner(elem,min, max){
this.elem = elem;
this.elem.value = min;
this.min = min;
this.max = max;
this.timer;
this.speed = 150; //milliseconds between scroll values
var selfO = this;
this.elem.onkeyup = function(){
var regex = /^[0-9]*$/;
if(!regex.test(selfO.elem.value)){
selfO.elem.value = selfO.elem.value.substring(0,selfO.elem.value.length-1);
return;
}
selfO.validateValue();
}
this.validateValue = function(){
if(Number(selfO.elem.value) > selfO.max) {selfO.elem.value = selfO.max;}
if(Number(selfO.elem.value) < selfO.min) {selfO.elem.value = selfO.min;}
}
this.stopSpinning = function(){
clearTimeout(selfO.timer);
}
this.spinValue = function(dir){
selfO.elem.value = Number(selfO.elem.value) + dir;
selfO.validateValue();
selfO.timer = setTimeout(function(){selfO.spinValue(dir);},selfO.speed);
}
};
window.onload=function(){
//create the Spinner objects
var SpinnerHours = new Spinner(document.getElementById('txtHours'),0,23);
var SpinnerMins = new Spinner(document.getElementById('txtMins'),0,59);
var SpinnerSecs = new Spinner(document.getElementById('txtSecs'),0,59);
var SpinnerWeight = new Spinner(document.getElementById('txtWeight'),0,100);
var SpinnerQuestion = new Spinner(document.getElementById('txtQuestion'),0,100);
document.getElementById('txtHours').onblur = function(){ this.value = cleanSpin(this.value);}
document.getElementById('txtMins').onblur = function(){ this.value = cleanSpin(this.value);}
document.getElementById('txtSecs').onblur = function(){ this.value = cleanSpin(this.value);}
document.getElementById('txtWeight').onblur = function(){ this.value = cleanSpin(this.value);}
document.getElementById('txtQuestion').onblur = function(){ this.value = cleanSpin(this.value);}
function cleanSpin(obj) {
if(obj > 0) {
var str = obj.replace(/^0*/,'');
lastSpin = str;
return str;
}
else {
return lastSpin;
}
}
var lastSpin = 1;
The problem is that your lastSpin variable, and indeed, your cleanSpin() function, are in the global scope, and thus shared across all Spinner instances.
Instead, you should try adding the cleanSpin method, or a variant thereof, to the Spinner "class", so that it becomes local to that instance of the Spinner.
EDIT: Here is the complete Javascript to illustrate what I meant. I have not tested this at all, as I do not have the rest of the code needed to do so, but hopefully you can see what I have changed:
function Spinner(elem, min, max) {
this.elem = elem;
this.elem.value = min;
this.min = min;
this.max = max;
this.timer;
this.speed = 150; //milliseconds between scroll values
this.lastSpin = 1; // added lastSpin as a property of the Spinner
var selfO = this;
this.elem.onkeyup = function() {
var regex = /^[0-9]*$/;
if (!regex.test(selfO.elem.value)) {
selfO.elem.value = selfO.elem.value.substring(0, selfO.elem.value.length - 1);
return;
}
selfO.validateValue();
}
// I have added the onblur function inside the Spinner "class"
this.elem.onblur = function() {
if (self0.elem.value > 0) {
var str = self0.elem.value.replace(/^0*/, '');
self0.lastSpin = str;
self0.elem.value = str;
}
else {
self0.elem.value = lastSpin;
}
};
this.validateValue = function() {
if (Number(selfO.elem.value) > selfO.max) {
selfO.elem.value = selfO.max;
}
if (Number(selfO.elem.value) < selfO.min) {
selfO.elem.value = selfO.min;
}
};
this.stopSpinning = function() {
clearTimeout(selfO.timer);
};
this.spinValue = function(dir) {
selfO.elem.value = Number(selfO.elem.value) + dir;
selfO.validateValue();
selfO.timer = setTimeout(function() {
selfO.spinValue(dir);
}, selfO.speed);
};
};
window.onload = function() {
//create the Spinner objects
var SpinnerHours = new Spinner(document.getElementById('txtHours'), 0, 23);
var SpinnerMins = new Spinner(document.getElementById('txtMins'), 0, 59);
var SpinnerSecs = new Spinner(document.getElementById('txtSecs'), 0, 59);
var SpinnerWeight = new Spinner(document.getElementById('txtWeight'), 0, 100);
var SpinnerQuestion = new Spinner(document.getElementById('txtQuestion'), 0, 100);
}
Is there a better way to write this function? I've inherited some javascript code and I'd like to make this more concise if possible. Also, I'll probably be adding many more "theme" elements and don't want to copy and paste over and over.
function imageClick() {
var theme1 = document.getElementById("li-theme1");
var theme2 = document.getElementById("li-theme2");
var theme3 = document.getElementById("li-theme3");
var imgtheme1 = theme1.getElementsByTagName("img");
var imgtheme2 = theme2.getElementsByTagName("img");
var imgtheme3 = theme3.getElementsByTagName("img");
var inputtheme1 = document.getElementById("radiotheme1");
var inputtheme2 = document.getElementById("radiotheme2");
var inputtheme3 = document.getElementById("radiotheme3");
imgtheme1[0].onclick = function() {
inputtheme1.checked = true;
highlightChoice("li-theme1");
}
imgtheme2[0].onclick = function() {
inputtheme2.checked = true;
highlightChoice("li-theme2");
}
imgtheme3[0].onclick = function() {
inputtheme3.checked = true;
highlightChoice("li-theme3");
}
}
function imageClick()
{
for (var i=1; i<4; i++)
{
var theme = document.getElementById("li-theme"+i);
var imgtheme = theme.getElementsByTagName("img");
imgtheme[0].onclick = (function (current)
{
return function()
{
document.getElementById("inputtheme"+current) = true;
highlightChoice("li-theme"+current);
}
})(i);
}
}
If you want to add more iterations at the later date, just increase the 4 in i<4 to the number of iterations you'd like to perform + 1.
I've "hardcoded" the imageClick() function to the ones that you've specified, but you could change this to be a "for(var i=1;i<4;i++) {imageClickItem(i);}" type loop if you wished.
function imageClick()
{
imageClickItem(1);
imageClickItem(2);
imageClickItem(3);
}
function imageClickItem(itemNumber)
{
var theme = document.getElementById("li-theme" + itemNumber);
var imgtheme = theme.getElementsByTagName("img");
var inputtheme = document.getElementById("radiotheme" + itemNumber);
imgtheme[0].onclick = function()
{
inputtheme.checked = true;
highlightChoice(theme.id);
}
}