Change image when clicking button - javascript

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.

Related

How to .append text to a div using jQuery?

I'm trying to append a piece of text to a div using jQuery. I try to do this using the following code:
<html><head></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
$("#conversation").append("<P>This is a message");
});
});
</script>
<div class="conversation"><p>some message</div>
<form><input type="button" id="sendButton" value="Send Message"></form>
</body></html>
Seeing the multitude of tutorials on the subject it seems to be such a simple thing to do, but I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated.
You need to use class selector, As #conversation referes to element with id conversation
$(".conversation").append("<P>aergerag");
Fiddle DEMO
EDIT
You should look at this To Close or Not To Close Tags in HTML5 and a good question Closing tags in HTML5
replace # with . in your selector (conversation is a CLASS)
$(".conversation").append("<P>aergerag");
I am not any good at jQuery but from one of my projects I had to simply target the div with html as:
var someData = "This is a message";
$("#conversation").html(someData);
If some contents exists before this, then you can retrieve them, concatenate, and write it back into the target div.

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>

How do I get HTML button value to pass as a parameter to my javascript?

I have multiple buttons corresponding to multiple text areas to clear. I need to send to have a function to handle all of these buttons and handle each seperately
<html>
<head>
<script src="jquery-1.6.js"></script>
<script type="text/javascript">
function getUniqueButtonValue(value)
{
alert(value);
$("value").hide();
}
</script>
</head>
<body>
<button id=someUinqueId value=something>Clear Selection</button>
</body>
</html>
Setting aside the fact that you're placing a unique id in the value attribute rather than the id attribute... here's a fiddle.
$(document).ready(function(){
$("button").click(function(){
var me = $(this);
// do whatever with me
alert(me.val());
me.hide();
});
});
There seem to be numerous problems with the code you've posted in your question. Firstly, (unless you're using <!DOCTYPE html> as your doctype) you can't have id values starting with a number.
Secondly, the jQuery (I'm assuming it's jQuery and not some other JS library) in your getUniqueButtonValue function is not going to work, because the selector is going to look for a value element, which is unlikely to exist.
I'm assuming that the value attribute of your button is meant to correspond to the id of another element, which you want to hide when the button is clicked.
As you have what appears to be jQuery code in your example, I will give you a jQuery solution to this, as it's far simpler:
$(document).ready(function() {
$("button").click(function() {
alert(this.value);
$("#" + this.value).hide();
});
});
Also, you don't close your body tag, but I'm guessing that's just a mistake in copying and pasting the code into the question.
You can do this:
<button id=123 value=uniqueId545 onclick="javascript:getUniqueButtonValue($(this).val());">Clear Selection</button>
try this
$("#123").click(function(){
getUniqueButtonValue($(this).val());
});
I'm not sure what you are trying to do here. If i guess correctly this is what you want (ids shouldn't begin with a number so I put an 'a' before the 123:
$("#a123").click(function(){
getUniqueButtonValue($("#a123").getAttribute('value');
}
function getUniqueButtonValue(value)
{
alert(value);
$("#"+value).hide();
}
</script>
</head>
<body>
<button id=123 value=uniqueId545>Clear Selection</button>
</html>
You can save yourself a lot of work by trying:
<button class="clearbutton" value="#Foo">Clear Foo</button>
<input type="text" name="foo" id="foo" />
With the following JavaScript:
$('.clearbutton').click(function(e) {
$($(this).val()).val('');
});

Can't change onclick dynamically through javascript: bookmarklet

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>

Why doesn't this work?

I want to change the value of an element with javascript.
<span id="mixui_title">Angry cow sound?</span>
<script type="text/javascript">
$("#mixui_title").val("very happy cow");
</script>
Use the text method instead:
$("#mixui_title").text("very happy cow");
Try html() function instead :
<span id="mixui_title">Angry cow sound?</span>
<script type="text/javascript">
$("#mixui_title").html("very happy cow");
</script>
2 Things:
1- Usualy, javascript is placed at the top of the page. If you do this in the future, you'll need to need to enclose it in the jQuery equivalent of document.ready:
$(function() {
// do stuff
});
This tells jQuery to run the function as soon as the document is ready.
2- For any value between two opening/closing tags, you need to use the jQuery method .html("enter text to change") while the .val() method is used to change the value of any control with the attribute value="" like inputs:
<input type="submit value="This will be changed with val()" />
The following should work fine. Note its wrapped in $(function() { }); and is using the .html() property and is placed at the top of the page.
<script type="text/javascript">
$(function(){
$("#mixui_title").html("very happy cow");
});
</script>
<span id="mixui_title">Angry cow sound?</span>
It's not enclosed by the
$(document).ready(function(){
//your code goes here
});

Categories