Can't change onclick dynamically through javascript: bookmarklet - javascript

I've tried to change the onclick function through a bookmarklet in the url using this code:
javascript: document.getElementById('Button1').onclick = function(){alert('foo')};void(0);
I can change the value of the button but just not the onclick function. Is it even possible?
Thanks ^^
Some notes: I've also tried putting the code in a .js file and creating an external .js file using createElementId but it still does not seem to work :/

You were missing the trailing semi-colon to terminate the alert call. It's easier to spot once you indent it:
document.getElementById('Button1').onclick = function() {
alert('foo');
};

This code works. So the only option is that Button1 is not an ID of an element on that page.
For example:
<div id="Button1">Button</div>
If an element on the page looks like that, you will get your alert ('foo');

Your code seems to work...
Try to insert this code into the w3schools jseditor http://www.w3schools.com/js/tryit.asp?filename=tryjs_events
<html>
<body>
<button type="button" id="Button1" onclick="alert('Some action');">Action!!</button>
<button type="button" id="Button2" onclick="document.getElementById('Button1').onclick = function(){alert('another action')};">Change onclick</button>
</body>
</html>

Related

Code a HTML button to link to a JavaScript file

I'm trying to get a button written in HTML to link to a separate JavaScript file when it is clicked, the button in question is coded below
<input type="button" id="clickme" value="Submit" />
I am using the Brackets code editor, and the js file I want to be linked is in the same project as my HTML code, if that helps at all
thanks in advance
Load the script into the page with a <script> element.
Keep your code in a function instead of simply running the whole thing with the script is loaded.
Find the button in the DOM (e.g. with getElementById) and bind the function as a click event listener with addEventListener).
If you mean link, I would use an <a> (anchor) tag which has an attribute href which is the reference. Therefore, you could use:
Link to JS
Or perhaps you meant the onclick attribute which would be:
<input type="button" id="clickme" onclick="myfunction()" value="Submit" />
However, as was pointed out, this is not best practice either.
jQuery.click() vs onClick
Provides some options and reinforces the idea that onclick is not the best way to trigger a Javascript function.
Just link your js script to a page by:
<script src="js/button.js"></script>
and then just call action in that scripts through the class or id.
<button id="btnShow"><h1 class="jumbotron-heading">Expand</h1></button>
<p class="p1">Test</p1>
That's a jQuery not js, but anyway a good example as I think
$('#btnShow').click(function(){
$('.p1').show();
});

Why won't JavaScript run?

I was making an HTML code editor, I tested all of the HTML tags I know and they all work, except for script tags.
When I type <script>something</script> into the text area and click a button, the script doesn't execute.
Please help! Here is the code:
<span id="finishedProduct">
<p>When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!</p>
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea></br>
<button type="button">Run Code!</button>
</form>
<script>
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here is the working code:
<span id="finishedProduct">When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea>
<br/>
<button type="button" onClick="makeCode()">Run Code!</button>
</form>
<script type="text/javascript">
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here's a link to the JSFiddle: http://jsfiddle.net/Q2qLF/. I've removed some broken HTML, such as; a button shouldn't be contained in a anchor tag, I've added a 'onclick' in your button that will call the 'makeCode()' function and I've added the 'type="text/javascript"' into your script tag as this maximises compatibility.
Please let me know if you need any more help
I've updated my JSFiddle http://jsfiddle.net/Xanco/Q2qLF/1/
Now there are 2 textareas, one for the HTML and one for the Javascript. i've also created a new function called 'makejs', this takes the value of the Javascript textarea and runs it through a 'eval' - this executes the Javascript passed to it.
I've put the answer in a Fiddle here: http://jsfiddle.net/joshnicholson/P8eh9/
I'm not sure why you're wrapping the button element inside an anchor, but I would do it a slightly different way.
Here is the revised javascript:
var myButton = document.getElementById("btnRunCode");
myButton.addEventListener("click", makeCode);
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
I added an id of "btnRunCode" to your button element, just to make things easier for me. See the Fiddle.

How do I get an img click to execute js using jsfiddle

I need an image click to execute a js function. I have it working in my project, but I have other code to develop so I'm trying to use jsfiddle. But I can't get this simple code to work in jsfiddle. when I use jsfiddle and I click the image, nothing happens.
What am I missing in my efforts to use jsfiddle?
My HTML
<div>
<img id="additem" Title="Add Item" onclick="myfunc()" OnMouseOver="this.style.cursor='pointer';" OnMouseOut="this.style.cursor='default';" src="~/images/Sign_Add_Icon_32.png" />
</div>
My JS
function myfunc() {
alert("hello");
}
Remove onload in framework and extensions, set it to in head or in body.
DEMO
This works! But what was the problem?
You can't wait for the document to load in that case, because myfunc isn't defined before the Javascript is executed after the HTML loads.

Change image when clicking button

This seems like it should work but doesn't. I'm not sure where the problem is - either I'm doing it wrong, or it's possible I have a syntax error. I just doesn't do anything. I'm trying to get the current picture to change when the button is clicked. I'm a beginner at Javascript, so please be gentle ;) Thank you!
<html>
<script>
function pictureChange()
{
document.getElementById(theImage).src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png");
}
</script>
<body>
<img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png">
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange()"></p>
</body>
</html>
You missed the quotes in .getElementById('theImage')
function pictureChange()
{
document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
}
Add " to getElementById argument and remove ) at the end of the line:
<script>
function pictureChange()
{
document.getElementById("theImage").src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
}
</script>
http://jsfiddle.net/cDd8J/ - here. It works.
theImage is just id of the element, not variable, so you have to put it in quotes.
There are lot of ways you could try.Calling the function using inline attributes or calling it using the id in your script.Here's one ,
theButton.onclick = function pictureChange()
{
document.getElementById("theImage").src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
}
Demo
You can use inline HTML:
<img src="img1.jpg" onclick="this.src='img2.jpg'"> works best.

click on a link tag while using jquery ?

I have a link tag that doesn't contain a url, but instead it has javascript. I'm using jQuery and when I try the ".click()" function, it doesn't work. I searched through the website and found some answers but all of them open the "href" of the link tag and these answers won't be helpful in my case, here's an example of the code :
<button onclick="ClickMe();">CLick Me!</button>
<a id="test" href="javascript:alert('hi');">Alert</a>
<script>
function ClickMe() {
$("#test").click();
}
</script>
This is a shared project and my ability to change the html of the page is very limited.
Here's the example : http://jsfiddle.net/Ayman_Mohamed/ygDmW/1/
Use a Vanilla Javascript!
function ClickMe() {
$('#test')[0].click();
}
Here is your jsfiddle
Working demo http://jsfiddle.net/sp3WR/
If you want to use href use it like this
Also all the answers above contains the click way as well.
Hope this helps the cause :)
code
function ClickMe() {
window.location.href = $("#test").prop('href');
}
You are trying to fire click of anchor tag having id test which you havent binded you put alert on href not binding click, bind click event with href you will be able to fire it using click()
Live Demo
Html
<button onclick="ClickMe();">CLick Me!</button>
<a id="test" href="javascript:alert('Hi');" onclick="alert('href clicked')">Alert</a>
Javascript
function ClickMe() {
$("#test").click();
}
This might work
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("hi!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Click Me" />
</body>
</html>

Categories