How to modify a function in a page using Bookmarklet? - javascript

Lets say I have an HTML page which has its own function myFunction()
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
alert("stack overflow");
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
I want to change the myFunction()definition like this
function myFunction() {
//alert("stack overflow");
document.getElementById("demo").innerHTML = "Hello World";
}
using bookmarklet.So is there any way to change the def temporarily ?
I tried using the Chrome Console to change its def and also remain successful,but I want to change it using bookmarklets.So please help me.

As it's a global, you can do this in your bookmarklet:
var oldFunction = myFunction;
myFunction = function() {
alert("Hello world!");
};
Or if you enclose your bookmarklet in a scping function (usually a good idea), probably store the old value on a window property instead of a local var (so you can access it from another bookmarklet to restore it later):
window.oldFunction = myFunction;
myFunction = function() {
alert("Hello world!");
};
Another bookmarklet could set it back again:
myFunction = window.oldFunction; // or just = oldFunction if using a local var
Live Example:
function myFunction() {
alert("Original function");
}
document.getElementById("btn-override").addEventListener("click", function() {
window.oldFunction = myFunction;
myFunction = function() {
alert("New function");
};
}, false);
document.getElementById("btn-restore").addEventListener("click", function() {
myFunction = window.oldFunction;
}, false);
<input type="button" id="btn-call" value="Click to call myFunction" onclick="myFunction()">
<input type="button" id="btn-override" value="Click to override it">
<input type="button" id="btn-restore" value="Click to restore it">

Try this :
javascript: myFunction = function(){console.log('c')}

Related

I tried using local storage

I wanted to clear the value of text inside the input on the click of a button:-
Here is my code:
'''
<head>
<script>
function myfunction1() { //remember code var
texttosave = document.getElementById('textline').value;
localStorage.setItem('mynumber', texttosave);
document.getElementById('remember').value = ''
}
function myfunction2() { //recall code
document.getElementById('recalledtext').innerHTML =
localStorage.getItem('mynumber');
}
</script>
</head>
<body>
<input type="text" id="textline" />
<button id="remember" onclick='myfunction1()'>remember text</button>
<button id="recaller" onclick='myfunction2()'>recall text </button>
<p id="recalledtext">Loading</p>
</body>
</html>'''
I have did the correct thing, I think but please help as it is not working.
You need to put the value into a variable:
function myfunction2() { //recall code
// ...
var my_number = localStorage.getItem('mynumber');
}
Looks like the problem is that you dont do anything with the data you read from local storage.
A quick fix below.
function myfunction2() { //recall code
document.getElementById('recalledtext').innerHTML =
document.getElementById('remember').value = localStorage.getItem('mynumber')
}

How do I change the function a button's onclick attribute refers to?

Here's my code:
function changeText() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
document.getElementById("myButton").innerHTML = "Change that back";
document.getElementById("myButton").onclick = "changeBack()";
}
function changeBack() {
document.getElementById("myHeader").innerHTML = "Hello World!";
document.getElementById("myButton").innerHTML = "Change text";
document.getElementById("myButton").onclick = "changeText()";
}
<script src="script.js"></script>
<h1 id="myHeader">Hello World!</h1>
<button id="myButton" ; onclick="changeText()">Change text</button>
My aim was that the button would switch back and forth between the two functions and text states, but all that happens is it switches the text the first time and then it doesn't do anything anymore. I was wondering how I would able to correctly change the function that the button refers to.
Simple, set the function itself.
document.getElementById("myButton").onclick = changeText;
...
document.getElementById("myButton").onclick = changeBack;
If you're going to use a string of Javascript rather than a function reference, you need to set the attribute, not the property.
function changeText() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
document.getElementById("myButton").innerHTML = "Change that back";
document.getElementById("myButton").setAttribute("onclick", "changeBack()");
}
function changeBack() {
document.getElementById("myHeader").innerHTML = "Hello World!";
document.getElementById("myButton").innerHTML = "Change text";
document.getElementById("myButton").setAttribute("onclick", "changeText()");
}
<script src="script.js"></script>
<h1 id="myHeader">Hello World!</h1>
<button id="myButton" onclick="changeText()">Change text</button>
You can us the same comment and just check the text to switch it back and forth:
function changeText() {
var btn = document.getElementById("myButton")
var txt = document.getElementById("myHeader")
if (txt.innerHTML == 'Hello World!') {
txt.innerHTML = "Have a nice day!";
btn.innerHTML = "Change that back";
} else {
txt.innerHTML = "Hello World!";
btn.innerHTML = "Change text";
}
}
<html>
<body>
<script src="script.js"></script>
<h1 id="myHeader">Hello World!</h1>
<button id="myButton" onclick="changeText()">Change text</button>
</body>
</html>
Add a conditional statement. As a very naive example, you could do add a third function and do something like:
<body>
<script src="script.js"></script>
<h1 id="myHeader">Hello World!</h1>
<button id="myButton"; onclick="determineFunction()">Change text</button>
</body>
function determineFunction() {
if(document.getElementById("myHeader").innerHTML === "Have a nice day!"){
changeText();
}
else{
changeBack();
}
}
function changeText() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
document.getElementById("myButton").innerHTML = "Change that back";
document.getElementById("myButton").onclick = "changeBack()";
}
function changeBack() {
document.getElementById("myHeader").innerHTML = "Hello World!";
document.getElementById("myButton").innerHTML = "Change text";
document.getElementById("myButton").onclick = "changeText()";
}
You should check the text of all elements if you will do this method- and maybe have a third conditional that console logs an error or something.
This is just one approach though- there's many ways to accomplish this- such as setting a global boolean value and checking that to determine which function to call.

javascript function object prototype

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')"/>

How to change an html tag with Javascript? [duplicate]

This question already has an answer here:
dynamically changing HTML tag
(1 answer)
Closed 9 years ago.
I want to display the text from a string into an HTML tag without moving to next page and display it.
<body>
<div>
<label id="lbl1">Label </label>
<button id="btn1" onclick="display()">Click </button>
<script>
function display() {
var str="Hello World";
document.write(str);
}
</script>
</div>
</body>
How do I edit the contents of the label tag?
Common …
document.getElementById('lbl1').innerHTML = str;
function display() {
var str="Hello World";
var label = document.getElementById('lbl1');
label.innerHTML = str;
}
<body>
<div>
<label id="lbl1">Label </label>
<button id="btn1" onclick="display()">Click </button>
<script>
function display() {
var str="Hello World";
var label = document.getElementById("lbl1");
label.innerText = str;
}
</script>
</div>
</body>
When you click the button, the function display() is run, and the label tag's text is changed to "Hello World".
Use document.getElementById("lbl1").innerHTML = display(); and add a return statement inside the function:
function display()
{
var str="Hello World";
return str;
}
You edit the contents in a similar manner: document.getElementById("lbl1").innerHTML = "New content...";.
You could also modify your display() function a little bit to get the desired result:
function display()
{
var str="Hello World";
var label = document.getElementById("lbl1");
label.innerHTML = str;
}
Another way:
window.onload = function()
{
var button = document.getElementById("btn1");
button.onclick = function()
{
document.getElementById("lbl1").innerHTML = "Hello World";
}
}
The last way is the most desired and it's the best to put JavaScript code inside another file and attach it via the src attribute of the script element.
Let's provide a complete example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<label id="lbl1">Label </label>
<button id="btn1">Click </button>
</body>
</html>
Then inside the JavaScript file you just register various events:
//JavaScript
window.onload = function() //You have to ensure that everything has loaded
{
var button = document.getElementById("btn1");
button.onclick = function()
{
document.getElementById("lbl1").innerHTML = "Hello World";
}
}
It's generally considered the best way to register events in a separate JavaScript file because of performance and maintenance simplicity gains. You can read more about it here.

JavaScript object not working

I am facing a problem with JavaScript objects. I have some text on a page which should converts into textfield when clicked. The problem is that when I click the text the console displays the error message
"textNode not defined or null and tn is not defined".
Please help, I want to solve this problem in a way so that I don't have to move the JavaScript code to any other location from head tag.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript" language="javascript">
function preload()
{
if(!tn) var tn=new Object();
tn.variables=
{
textboxNode: document.getElementById('textbox'),
textNode: document.getElementById('text'),
textValue: textNode.firstChild.nodeValue,
doneButton: document.getElementById('done')
};
}
function change()
{
tn.variables.textboxNode.setAttribute('value', textValue);
tn.variables.textNode.style.display = 'none';
tn.variables.textboxNode.setAttribute('type','text');
tn.variables.doneButton.setAttribute('type','button');
}
function changeBack()
{
tn.variables.textNode.firstChild.nodeValue = textboxNode.value;
tn.variables.textNode.style.display = 'block';
tn.variables.textboxNode.setAttribute('type', 'hidden');
tn.variables.doneButton.setAttribute('type','hidden');
}
</script>
</head>
<body onload= "preload()">
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
</body>
</html>
Thanks in advance.
The object tn is local to the preload function.
Define it as global variable instead:
var tn = new Object();
function preload()
{
tn.variables=
{
//....
}
}
Also, you can't get other property value when you just define the object.
Change textValue to be a function instead:
tn.variables =
{
textboxNode: document.getElementById('textbox'),
textNode: document.getElementById('text'),
textValue: function() {
return this.textNode.firstChild.nodeValue;
},
doneButton: document.getElementById('done')
};
Then invoke it as function as well, for example:
tn.variables.textboxNode.setAttribute('value', tn.variables.textValue());
i think your tn variable is not correctly set in a global scope. Try to modify the top of your javascript like this:
<script type="text/javascript" language="javascript">
var tn = null;
function preload()
{
if(!tn)
{
tn=new Object();
}
tn.variables=
{
textboxNode: document.getElementById('textbox'),
textNode: document.getElementById('text'),
textValue: textNode.firstChild.nodeValue,
doneButton: document.getElementById('done')
};
}
to begin with, define tn globally - outside the scope of preload

Categories