Accessing different objects within .innerHTML Issue - javascript

I am currently trying to change an object by accessing it from another object by using the .innerHTML command, here's a code that I am trying to use:
<!DOCTYPE html>
<div>
<img id="ALogo" src="images/picture1" onMouseOver="logoChange1" onMouseOut="logoChange2"/>
</div>
</html>
<script>
var logo = document.getElementById("ALogo");
function logoChange1() {
logo.innerHTML = "src='images/picture1'
};
function logoChange2() {
logo.innerHTML = "src='images/picture2'
};
</script>
Unfortunately, the actual image will not change, is there another way to do it? Or am I doing something wrong?

why don't you do:
function logoChange1() {
logo.setAttribute("src", "images/picture1");
};
function logoChange2() {
logo.setAttribute("src", "images/picture2");
};
or just change the src property:
function logoChange1() {
logo.src = "images/picture1";
};
function logoChange2() {
logo.src = "images/picture2";
};

Try this.
<script>
function logoChange1() {
document.getElementById("myimage").setAttribute("src","images/picture1");
};
function logoChange2() {
document.getElementById("myimage").setAttribute("src","images/picture1");
};
</script>
My Source:http://www.javascriptkit.com/dhtmltutors/domattribute.shtml

Change the images 'src':
<img id="ALogo" src="http://www.placehold.it/200" onmouseover="logoChange1()" onmouseout="logoChange2()"/>
<script>
var logo = document.getElementById("ALogo");
logoChange1 = function(){
logo.src = 'http://www.placehold.it/200&text=1';
}
logoChange2 = function(){
logo.src = 'http://www.placehold.it/200&text=2';
}
</script>
EG: http://jsbin.com/gewoz/1/edit?html,output

Related

Button click wont trigger function

I'm having trouble triggering a function. I have the following code:
var dnfmomd;
dnfmomd = new function () {
//function content
}
$("#launch_button").on("click", dnfmomd.init);
Have you tried this?
var dnfmomd = function () {
//function content
}
$("#launch_button").on("click", dnfmomd());
I would recommend doing it this way
var dnfmomd = function() {
//function content
}
$("#launch_button").on("click", function() {
dnfmomd();
});

changing image with javascript within if/else

I am trying to change an image in my HTML, via an If/else statement, so the page displays an image depending on a value from another script
i currently have this code
<script>
if (b.className="yes") {
img src="Site/assets/HappyObama.jpg"
}
else {
img src="Site/assets/SadObama.jpg"
}
how can i fix this? Is there something within Javascript that does this?
Here is working example
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<img id="img" src="#">
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
var i = true;
if(i) {
document.getElementById("img").src = "https://www.w3schools.com/css/trolltunga.jpg";
} else {
document.getElementById("img").src = "http://wallpaper- gallery.net/images/image/image-13.jpg";}
}
</script>
</body>
</html>
Use a function to set the value for src.
function getImage(className) {
var image = "";
if (className == 'yes') {
image = "Site/assets/HappyObama.jpg"
}
else {
image = "Site/assets/SadObama.jpg"
}
return image;
}
Assign an id to your img tag, then you can
//First using jQuery
<script>
if (b.className="yes")
{
$("#img").attr('src', 'Site/assets/HappyObama.jpg');
}
else
{
$("#img").attr('src', 'Site/assets/SadObama.jpg');
}
</script>
//Second using javascript
<script>
if (b.className="yes")
{
document.getElementById("img").src="Site/assets/HappyObama.jpg";
}
else
{
document.getElementById("img").src="Site/assets/SadObama.jpg";
}
</script>
Lemme know if the problem resolved. Happy to help
You can do like this
if (b.className="yes") {
document.getElementById("imageid").src="Site/assets/HappyObama.jpg";
} else {
document.getElementById("imageid").src="Site/assets/SadObama.jpg";
}

My function is not running in JavaScript

How do I get this code to work in the "head" tag of the HTML. I must use these two functions, and cannot use only one function. I know this is bad practice, but how would I go about doing this? Thank you for your help.
var myImage;
function prepareEventHandlers() {
var myImage = document.getElementById('mainImage');
}
function runEvents() {
myImage.onclick = function() {
alert('You clicked on the image.');
};
}
window.onload = function() {
prepareEventHandlers();
runEvents();
}
You need to remove var in prepareEventHandlers(), because you are declaring a new local variable called myImage, not assigning the outer one.
var myImage;
function prepareEventHandlers() {
myImage = document.getElementById('mainImage');
}
Remove the "var" in your prepareEventHandlers() function.
var myImage;
function prepareEventHandlers() {
myImage = document.getElementById('mainImage');
}
function runEvents() {
myImage.onclick = function() {
alert('You clicked on the image.');
};
}
window.onload = function() {
prepareEventHandlers();
runEvents();
}

change image source with javascript - what's wrong?

<IMG onmouseover="document.swap2.src='http://www.grlf.com/pics/png';" id="brewmp" alt=Brew src=changeOSImage() width=26 height=24>
function changeOSImage() {
var mp_os = "x";
if (mp_os) == "Brew MP") {
document.getElementById("brewmp").src = "http://www.greengo-cellular.com/ebay_files/images/features_n_02.png";
} else {
document.getElementById("brewmp").src = "http://www.greengo-cellular.com/ebay_files/images/features_02.png";
}
};
For some reason instead of changing the url, the url displays the function name inside of it (therefore leading to nowhere). What have I done wrong?
You can not specify a function at the src attribute of an image.
Try putting the changeOSImage() function at the onload event of the document, or calling it from some other function.
As already mentioned, the src of your image cannot be a function. Also I cannot see what document.swap2 actually refers to in your code. try something like
<img id="brewmp" src="http://www.grlf.com/pics/png" />
<script>
window.onload = (function(){
var mp_os = 'x';
document.getElementById('brewmp').onmouseover = (function(){
this.src = 'path/to/different/image';
});
});
</script>
I'm not sure what mp_os is referring to in your initial code as it's set as x and you never change it, plus it is defined within the scope of your function which means it will always be 'x' in this case.The above should give you a good starting point to add your "if" statement into though, but you should declare var mp_os outside of the function
As noted in the other answers, you have an extra ) in your if statement. Try this:
Example: JsFiddle
JavaScript (added inside <head></head>):
<script>
var mp_os = '';
function changeImage(){
if (mp_os == "Brew MP") {
mp_os = "x";
document.getElementById("brewmp").src = "http://png-5.findicons.com/files/icons/75/i_like_buttons_3a/512/perspective_button_stop.png";
} else {
mp_os = "Brew MP";
document.getElementById("brewmp").src = "http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Perspective-Button-Go-icon.png";
}
}
</script>
HTML:
<img onmouseover="changeImage()" onmouseout="changeImage()" id="brewmp" alt="Brew" src="http://png-5.findicons.com/files/icons/75/i_like_buttons_3a/512/perspective_button_stop.png" width="20%">

processing.js change script source

I need to find a way where I can dynamically change the source of a processing script inside an HTML document.
This is the embedded script which works fine:
<script type='application/processing' src='sketch.txt' id="applet">
</script>
Now I try to change the source:
$('#applet').attr('src', 'sketch2.txt');
alert($('#applet').attr('src'));
The alert shows that the source was changed to 'sketch2.txt' but the applet still remains the same. I think I need to refresh the script in some way.
Thank you in advance for any help!
I believe you have to manually attach each proc to the canvas, instead of just changing the the source file. This worked here:
function first_call(processing) {
processing.size(300,300);
processing.background(100);
var called = false;
processing.draw = function() {
if (!called) { processing.println("called #1"); called = true; }
}
}
function second_call(processing) {
processing.size(400,400);
processing.background(200);
var called = false;
processing.draw = function() {
if (!called) { processing.println("called #2"); called = true; }
}
}
var canvas = document.getElementById('canvas1');
var processingInstance = new Processing(canvas, first_call);
var processingInstance = new Processing(canvas, second_call);

Categories