I am having troubles using shift() to call functions I have put in an array. I have put together a simple example illustrating the problem.
Essentially the function gets called, however, the changes to variables in the function do not stick.
<html>
<head>
<script type="text/javascript">
Taco = function() {};
Taco.prototype.init = function() {
this.ex1 = "ex1 in init()";
alert(this.ex1);
};
</script>
</head>
<body>
<input type="Submit" onClick="withShift();" value="withShift"/>
<div id="div1">
</div>
<input type="Submit" onClick="noShift();" value="noShift"/>
<div id="div2">
</div>
<script type="text/javascript">
// This calls init but does not hold the value of ex1 after the call
withShift = function() {
taco = new Taco();
funcQ = [];
funcQ.push(taco.init);
funcQ.shift()();
div1 = document.getElementById("div1")
div1.appendChild(document.createTextNode(taco.ex1));
};
// this calls init and it holds the value...
noShift = function() {
taco2 = new Taco();
taco2.init();
div1 = document.getElementById("div2")
div1.appendChild(document.createTextNode(taco2.ex1));
}
</script>
</body>
</html>
Thank you in advance for any suggestions.
JavaScript does not remember the this argument when you pass method pointers. You have to use the call or apply method on the function object to explicitly pass this.
Using taco.init is roughly the same as using Taco.prototype.init when it comes to passing function pointers. Here's what would be the working way:
taco = new Taco();
funcQ = [];
funcQ.push(taco.init);
// pass taco first, and the non-hidden function arguments after;
// in this case, no other argument
funcQ.shift().call(taco);
If you can't use this kind of syntax, you may use anonymous functions:
taco = new Taco();
funcQ = [];
funcQ.push(function() { taco.init(); });
funcQ.shift()();
In opposition to the object.method syntax that doesn't carry the this argument, closures are reliable.
Related
I am trying to implement model view controller pattern in a simple print hello world program. I can get everything to work properly except at the end after I click the button in my program. I am trying to bind my function to the controller so that way the function uses the this statements in the controller to access my model and view instances in the controller. When I click the button the this statements in my function are referencing my button object instead of the controller. I am having trouble using bind to change what the this statements point to. Please, any assistance would be greatly appreciated. thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Hello World MVC </title>
<link rel="stylesheet" href="css file name">
</head>
<body>
<div id="container">
<input type=text id="textBox">
<button id="displayButton">Display</button>
</div>
<script src="mainbind.js"></script>
</body>
</html>
function Model(text) {
this.data = text;
};
function View() {
this.displayButton = document.getElementById('displayButton');
this.textBox = document.getElementById('textBox');
this.initialize = function(displayButtonProcess) {
this.displayButton.addEventListener('click', displayButtonProcess);
}
};
function Controller(text) {
this.model = new Model(text);
this.view = new View;
this.buttonClick = function(event) {
// process the button click event
this.view.textBox.value = this.model.data;
};
this.view.initialize(this.buttonClick);
};
let x = new Controller("Hello World");
x.buttonClick = x.buttonClick.bind(x);
The problem is that you are changing controller instance property after you have already used unbinded version as a callback.
You can fix it by binding directly when creating a controller. Or you should better use arrow functions instead.
this.buttonClick = () => this.view.textBox.value = this.model.value
function Model(text) {
this.data = text;
};
function View() {
this.displayButton = document.getElementById('displayButton');
this.textBox = document.getElementById('textBox');
this.initialize = function(displayButtonProcess) {
this.displayButton.addEventListener('click', displayButtonProcess);
}
};
function Controller(text) {
this.model = new Model(text);
this.view = new View;
this.buttonClick = function(event) {
// process the button click event
this.view.textBox.value = this.model.data;
};
this.view.initialize(this.buttonClick.bind(this));
};
let x = new Controller("Hello World");
// x.buttonClick = x.buttonClick.bind(x);
<div id="container">
<input type=text id="textBox">
<button id="displayButton">Display</button>
</div>
Is there a way to add a new Document method?
I try researching this on google but it only shows how to make your own js object and add a method on it.
This is my code:
<html>
<head>
<script>
document.prototype.atvalue = function atvalue(arg)
{
var newType = window.getComputedStyle(this, null).getPropertyValue(arg);
return newType;
};
</script>
</head>
<body>
<p style="font-size: 100px"> help </p>
</body>
</html>
Given:
SomeConstructorFunction.prototype.foo = something;
Then foo will be a property of instances of that function:
var something = new SomeConstructorFunction();
something.foo();
document is not a constructor function.
If you want to add a property to an object then … just add it to that object:
document.foo = something;
You cannot create a document prototype function, but you can create a custom document method by:
document.something = function(){};
and by calling it:
document.something();
HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="score-board.css">
<title>Score Board App</title>
</head>
<body>
<div id="playersscores">
<span id="p1score">0</span><span> To </span> <span id="p2score">0</span>
</div>
<p>Playing to <span id="score">5</span></p>
<input type="field" value="5" ></input>
<button id="p1clicked">Player one</button>
<button id="p2clicked">Player two</button>
<button id="reset">Reset</button>
<script type="text/javascript" src="score-board.js"></script>
</body>
</html>
Javascript is :
Whenever this code is loaded :
var p1result = document.querySelector("#p1score");
var p2result = document.querySelector("#p2score");
var p1clicked = document.querySelector("#p1clicked");
function increment_score (player_result) {
//var score = parseInt(player_result.innerText) + 1;
player_result.innerText = (parseInt(player_result.innerText) + 1).toString();
}
p1clicked.addEventListener("onclick", increment_score(p1result))
Whenever this code is loaded in a browser, the span showing the result for player 1 is showing one directly without clicking on player 1 button. i'm not sure what is wrong with the event listener im using.
The event is click instead of onclick
The event listener should be a reference to the function itself, not the result of a function call (which increments the score by 1)
Inside the function, you can access the button with this:
The code could look like this:
function increment_score() {
var player_result = this;
player_result.innerText = (parseInt(player_result.innerText) + 1).toString();
}
p1clicked.addEventListener('click', increment_score);
Use click event not onclick
You pass result of function not instead reference to function
If you need pass parameters to event handler - you can use bind:
p1clicked.addEventListener("click", increment_score.bind({result: p1result, inc: 1 }) )
p2clicked.addEventListener("click", increment_score.bind({result: p2result, inc: 2 }) )
function increment_score () {
var score = parseInt(this.result.innerText) + this.inc;
this.result.innerText = score;
}
[ https://jsfiddle.net/6vw8ay3x/ ]
You have a couple problems there. First, when calling the addEventListener function, you need to specify just "click", not "onclick". Secondly, when you pass the function to addEventListener, you just want it to be a reference to the function not an actual function call. The following changes will net you the result you are seeking.
function increment_score () {
p1result.innerText = (parseInt(p1result.innerText) + 1).toString();
}
p1clicked.addEventListener("click", increment_score);
But since you want to be able to use the same function for multiple players, then I would suggest adding the "onclick" handler to the HTML which will allow you to pass the element you want to increment. Then your HTML code would look like this:
<button id="p1clicked" onclick="increment_score_with_param(p1result);">Player one</button>
<button id="p2clicked" onclick="increment_score_with_param(p2result);">Player two</button>
and your javascript would be:
var p1result = document.querySelector("#p1score");
var p2result = document.querySelector("#p2score");
var p1clicked = document.querySelector("#p1clicked");
function increment_score_with_param (player_result) {
player_result.innerText = (parseInt(player_result.innerText) + 1).toString();
}
window.onload = function(){
var p1result = document.querySelector('#p1score');
var p2result = document.querySelector('#p2score');
var p1clicked = document.querySelector('#p1clicked');
p1clicked.addEventListener("click", function(e){
e.preventDefault();
p1result.innerText = (parseInt(p1result.innerText) + 1).toString();
});
}
Why prototype function is not called .. when image is clicket?
Html Code :--
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<script type="text/javascript" src="tt.js"></script>
</head>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<input type="image" src="http://t2.gstatic.com/images?q=tbn:ANd9GcSTcJA5J-LOj0HOP1ZMzdSQIsxwuguFdtlesHqzU15W8TXx232pFg" onclick="myFunction('Info clicked')"/>
<script>
var a = new myFunction();
document.getElementById("demo").innerHTML = a.k;
</script>
</body>
</html>
java script :--
function myFunction(l) {
this.k = "hello";
alert(this.k);
var t = this.temp(l);
alert(t);
}
myFunction.prototype.temp = function(a)
{
alert(a);
return 10;
}
If i put inside html page body it works :--
<script>
var a = new myFunction();
document.getElementById("demo").innerHTML = a.k;
</script>
Because you are calling this.temp() on the constructor function and not on an instance of it.
You need to create an instance with new.
new myFunction('Info clicked')
Note that this doesn't make sense. If you want to do things when the constructor runs, you should assign the methods to the constructor and not the prototype.
If you want to stick to your javascript definition, all you need to do to solve this problem is to change the attribute onClick on your html code to new myFunction("...");
<input type="image" src="http://..." onclick="new myFunction('Info clicked')"/>
I have a collection of arrays which are generated dynamically. What I am trying to do is to implement an AutoComplete functionality. I want to use those arrays in click event handler, by getting name dynamically and assigning that to local array. But that is not working (I'm not sure abt my code). Is there any way to achieve that?
Here is my code which I believe should work (which does not work):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script>
var ga_input1 = new Array('India','Russia','Norway');
var ga_input2 = new Array('Delhi','Mumbai','Hyderabad');
</script>
<body>
Countries: <input id="input1" type="text"/>
Cities: <input id="input2" type="text"/>
<script>
var arrayTmp = new Array();
$('input').keydown(function(){
var id = $(this).attr('id');
arrayTmp = "ga_"+id; // What I believe here is the values of ga_input1/ga_input2 are assigned to array 'arrayTmp'
//alert(arrayTmp[0]);
});
</script>
</body>
All global variables are members of the window object, so:
arrayTmp = window["ga_"+id];
But I'd personally put the data in an object like this:
data = {
'input1': ['India','Russia','Norway'],
'input2': ['Delhi','Mumbai','Hyderabad']
};
...
arrayTmp = data[id];
You can put that arrays in a "Map" and later fetch them from it easily.
Here's how it's done:
var countryMap = {};
countryMap["Europe"] = ['Russia', 'England', 'Norway'];
countryMap["America"] = ['USA', 'Canada', 'Mexico'];
....
var arrayTmp = countryMap["America"];
alert(arrayTmp[0]); //USA
alert(arrayTmp[1]); //Canada
alert(arrayTmp[2]); //Mexico
What you have in arrayTmp is just a string "ga_input1". Instead, try eval("arrayTmp=ga_"+id);.
eval('var arrayTmp = ga_' + id);
alert(arrayTmp[0]);