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";
}
Related
The JavaScript below causes some text to blink on a web page. When I use it with an anchor tag on Blogger it only acts like a link and does not blink. If it is not an anchor tag it will blink. Is there any way to get around this on Blogger?
<html>
<head>
<script type="text/javascript">
function blinker()
{
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
}
}
</script>
</head>
<body onload="blinker();">
<div id="blink">GOOGLE</div>
</body>
</html>
function blinker() {
if (document.getElementById("blink")) {
var d = document.getElementById("blink");
d.style.color = (d.style.color == 'red' ? 'white' : 'red');
setTimeout('blinker()', 500);
}
}
blinker();
GOOGLE
<div id="blink">GOOGLE</div>
<script type="text/javascript"> function blinker() {
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
} } </script>
<body onload="blinker();">
<div id="blink"> GOOGLE</div> </body>
Basically, you need to add an href element.
Finally found answer myself
<script type="text/javascript">
function blinker()
{
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
}
}
</script>
<body onload="blinker();">
<div id="blink">GOOGLE</div>
</body>
Thanks everybody for helping
Maybe try this. It uses JavaScript to treat the div a link. Looks like StackOverflow blocks that though, which is understandable. It should still work for you on other pages. Note however that the user won't see what's on the other side if they hover their mouse over it, and the cursor won't change to indicate it is clickable.
function blinker() {
if (document.getElementById("blink")) {
var d = document.getElementById("blink");
d.style.color = (d.style.color == 'red' ? 'white' : 'red');
setTimeout('blinker()', 500);
}
}
function goto(page) {
document.location = page;
}
blinker();
<div onclick="goto('https://www.google.com/')" id="blink">GOOGLE</div>
I would like to change the content of a element with a button click and then have it return back to its original message. How Would i do this preferable with toggle class if possible.
<doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Day Practice</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
</head>
<body>
<h1> HotDogs</h1>
<input type=button id=button value=button>
<script>
$("#button").click(function(){
$("h1").html("Change to this");
});
</script>
This changes the header with a button, but I don't know how to revert it when I click on the button again. Maybe Toggle Class, I don't know.
this should solve:
$( "#button" ).toggle(function() {
$("h1").html("Change here");
}, function() {
$("h1").html("Revert back here");
});
Set a flag to toggle and check, and store the old text whenever you change it. An example:
var flag = false;
var old_text = "";
$("#button").click(function () {
if (flag) {
$("h1").html(old_text);
} else {
old_text = $("h1").html();
$("h1").html("Change to this");
}
flag = !flag;
});
You can try this:
var alternate_text = "Change to this";
$("#button").click(function(){
var temp = $("h1").html()
$("h1").html(alternate_text);
alternate_text = temp; // Switch the two instances of text.
});
Since you prefered to do this with toggleClass(), here you go:
$(document).ready(function(){
var oldContent;
$("#button").click(function(){
if($(".newCont")[0]){
$("h1").html(oldContent);
} else {
oldContent = $("h1").html();
$("h1").html("New text here");
}
$("h1").toggleClass("newCont");
});
});
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
I'm creating a really simple rte and here is my problem, i can get the selected text in iframe(designmode=true) however i cannot change it.
html
<a onclick="change();">change</a>
<iframe id="textEditor"></iframe>
script file
function $(Str1){return document.getElementById(Str1);}
rte()
{
var texteditor=$('texteditor');
textEditor.document.designMode="on";
textEditor.document.body.contentEditable="True";
textEditor.document.open();
textEditor.document.close();
textEditor.focus();
}
function change()
{
var userSelection,range;
if (window.frames['textEditor'].getSelection)
{
userSelection=window.frames['textEditor'].getSelection();
}
else if(document.frames['textEditor'].selection)
{
userSelection=document.frames['textEditor'].selection.createRange();
}
if(userSelection.getRangeAt)
{
range=userSelection.getRangeAt(0);
}
else
{
range=document.frames['textEditor'].createRange();
range.setStart(userSelection.anchorNode,userSelection.anchorOffset);
range.setEnd(userSelection.focusNode,userSelection.focusOffset);
}
range="<div style='color:#f00;'>" + range + "</div>";
}
window.onload = rte();
Could it be that the first line of the rte() function references 'texteditor' and not 'textEditor'?
I found a way to work it up, change function should be like that
function change()
if(document.selection)
{
sText=textEditor.document.selection.createRange();
sText.execCommand("createlink","","");
temp=sText.parentElement().innerHTML;
newNode=textEditor.document.createElement("h1");
replacement=sText.parentElement().replaceNode(newNode);
newNode.innerHTML=temp;
}
else if(document.getSelection)
{
sText=textEditor.window.getSelection();
myTag=textEditor.document.createElement("div");
myTag.setAttribute("class","bold");
sText.getRangeAt(0).surroundContents(myTag);
}
}
and thanks to anyone who can help me!
I have a text with this code:
<a onclick="return showPic(this); mostrarespectacular()" href="Imatges/productosnuevos/urbano01.jpg">  Circuito Espectacular Barcelona</a>
and the scripts are:
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('imgContenedor').src = whichpic.href;
if (whichpic.title) {
document.getElementById('imgDescripcion').childNodes[0].innerHTML = whichpic.innerHTML;
}
return false;
} else {
return true;
}
}
</script>
<script type="text/javascript">
function mostrarespectacular() {
div = document.getElementById('circuloespectacular');
div.style.display = 'inline';
}
function cerrarespectacular() {
div = document.getElementById('circuloespectacular');
div.style.display='none';
}
</script>
and my problem is that the first function works perfect but not the second one (which has to show a div). Any ideas of what i'm doing wrong? Thanks!!
You return from the onclick after the first function call. Remove that and you should be fine.
The "return" is branching out of the script after calling the showPic() function. Remove the return or place it before the "mostrarespectacular()" call or move it to the end, etc.