Changing 'innerHTML' on <img> not changing image - javascript

Here is my code:
HTML
<form>
<img id='image' src=""/>
<input type='text' id='text'>
<input type="button" value="change picture" onclick="changeimage()">
</form>
JavaScript
function changeimage() {
var a=document.getElementById('text').value
var c=a+".gif"
c="\""+c+"\""
var b= "<img src="+c+"\/>"
document.getElementById('image').innerHTML=b
}
I have some GIF images. I want to write an image name in the textbox and then have the image become shown when the button is clicked. However, it's not happening. Why?

You should do this:
document.getElementById('image').src = c;
By doing document.getElementById('image').innerHTML=b you are trying to defined the HTML inside the <img> tag which is not possible.
Full script:
function changeimage() {
var a = document.getElementById('text').value;
var c = a + ".gif";
document.getElementById('image').src = c;
}

Try this instead:
<html>
<body>
<script type="text/javascript">
function changeimage() {
var a = document.getElementById('text').value;
document.getElementById('image').src = a + '.gif';
}
</script>
<form>
<img id='image' src=""/>
<input type='text' id='text'>
<input type="button" value="change picture" onclick="changeimage()">
</form>
</body>
</html>

document.getElementById("image").setAttribute("src","another.gif")

In order to update the <img> tag you need to update it's source, not it's inner HTML.
function changeimage()
{
var a=document.getElementById('text').value
var c=a+".gif"
c="\""+c+"\""
var elem = document.getElementById('image');
elem.setAttribute('src', c);
}

Related

Can't set a span's content within an anchor

I have this field.
<input type="text" name="amount" id="amount" value="20.00">
I have this link.
<a target='_blank' href="https://PayPal.me/MyAccount/<span id='myspan'>0.00</span>">click here</a>
When I try to insert the amount value ($20.00) into myspan, I get this error:
"Uncaught TypeError: Cannot set property 'innerHTML' of null"
I'm using this Javascript that is at the bottom of the file.
<script type ="text/javascript">
window.addEventListener('load', function () {
myFunction();
})
function myFunction() {
var thisamount = document.getElementById("cart_total").value;
alert(thisamount);
document.getElementById("myspan").innerHTML = thisamount;
}
</script>
What the frig am I doing wrong?
Your anchor should look like this
<a target='_blank' id="myHref" href="#"><span id='myspan'>0.00</span>USD</a>
then
function myFunction() {
var thisamount = document.getElementById("cart_total").value;
alert(thisamount);
document.getElementById("myHref").href = `https://PayPal.me/MyAccount/${thisamount}`;
document.getElementById("myspan").innerHTML = thisamount;
}
You referenced cart_total but your field is named amount
A span inside of quotes is part of a textnode, it is no longer a separate DOM node
window.addEventListener('load', function () {
myFunction();
});
function myFunction() {
var thisamount = document.getElementById("amount").value;
console.log("thisamount", thisamount);
let url = `https://PayPal.me/MyAccount/${thisamount}usd`;
console.log("url", url);
document.getElementById("paypalLink").setAttribute("href", url);
}
<input type="text" name="amount" id="amount" value="$20.00">
<a id="paypalLink" target='_blank' href="https://PayPal.me/MyAccount/">Pay Me!</a>
the first thing you should declare the function before the call
<script type ="text/javascript">
function myFunction() {
var thisamount = document.getElementById("cart_total").value;
alert(thisamount);
document.getElementById("myspan").innerHTML = thisamount;
}
window.addEventListener('load', function () {
myFunction();
})
</script>
u can't add an element inside another element attribute
<a target='_blank' href="https://PayPal.me/MyAccount">
<span id='myspan'>0.00</span>
Another solution can be something like this (i put notes inside the snippet):
document.querySelector('#amount').addEventListener('change', function() { // add change event to the input in order to update the current href
document.querySelector('#sendMoney').setAttribute('href', 'https://PayPal.me/MyAccount/'+this.value+'USD'); // set the href
document.querySelector('#sendMoney').textContent = this.value+'$'; // set text content with current value
});
<label for="amount">Set amount</label>
<input type="number" name="amount" id="amount" value="20.00" />
<br />
<a id="sendMoney" href="https://PayPal.me/MyAccount/" target="_blank"></a>

Javascript setTimeout and clearTimeout then proceeding with the remaining functions if a button is clicked not working

Below is the code that I have written so far. I want to add a timeout feature so if you open the page and don't click one of the three action buttons the picture changes to picture 6 (the last picture)
Currently I have the timeout feature working and stopping if one of the three buttons is clicked but I need the second onclick to work if the button is pressed.
Example would be if I open the page and click feed I want the timer to stop and the function changeImage to occur.
Any help would be greatly appreciated.
var target = document.getElementById('target');
var counter = 0;
var myVar;
var myRhino = [
"https://c402277.ssl.cf1.rackcdn.com/photos/14623/images/magazine_hero/WW188829.jpg?1509653431",
"https://img04.deviantart.net/0594/i/2010/261/5/6/happy_rhino_by_ammut88-d2z0sto.jpg",
"https://images.fineartamerica.com/images-medium-large-5/angry-rhino-daniel-eskridge.jpg",
"https://c2.staticflickr.com/2/1340/1368093048_fa7ef85a5a_z.jpg?zz=1",
"https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/hungry-rhino-james-sarjeant.jpg",
"http://m.rgbimg.com/cache1nulfB/users/z/za/zatrokz/600/meRoKDQ.jpg",
"https://i.ytimg.com/vi/R_zz1GEkEk4/maxresdefault.jpg",
];
myVar = setTimeout("TimeoutImg()",5000);
function changeImage(btn) {
if (!btn) {
counter += 1;
target.src = myRhino[counter % myRhino.length];
} else {
var data = btn.getAttribute('data-values');
var pics = JSON.parse("[" + data + "]"); // Convert string of numbers to an array
var num = pics.shift(); // remove index 0 from array and store it in num
pics.push(num); // Add what was previously at index 0 to end of array
target.src = myRhino[num];
counter = num;
btn.setAttribute('data-values', pics.join(','));
}
}
function TimeoutImg(){
target.src = myRhino[6];
}
function TimeoutStop(){
clearTimeout(myVar);
}
<HTML>
<head>
<center>
<b> This is My Virtual Pet!</b>
</center>
<center>
<img id="target" src="https://c402277.ssl.cf1.rackcdn.com/photos/14623/images/magazine_hero/WW188829.jpg?1509653431" width="300" height="250" />
<br>
<input type="button" onclick="changeImage()" value=" Scroll Through Emotions" /> </center>
<br>
<center>
<input type="button" onclick="TimeoutStop()" onclick="changeImage(this)" data-values="1,1,2,0" value="Feed">
<input type="button" onclick="TimeoutStop()" onclick="changeImage(this)" data-values="6,4,5,2" value="Pet">
<input type="button" onclick="TimeoutStop()" onclick="changeImage(this)" data-values="3,0,4,4,1" value="Play">
</center>
</head>
<body>
</body>
</HTML>

How to click on an image to show images with a function

Trying to click the magic8, but the happy, sad and surprised pictures won't show below the line. What did I do wrong? I have saved the images in random.js in the same folder.
<html>
<head>
<script type=text/javascript src="random.js">
</script>
<script>
function magicEight() {
var imgName;
imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]);
document.getElementById('outputDiv').value = imgName;
}
</script>
</head>
<body>
<div style="text-align:center">
<h1> Magic 8-ball (Mattel, Inc.) </h1>
<p> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. </p>
<input type="text" id="questionBox" size=90 value="">
<p>
<input type="image" src="http://balance3e.com/Images/8ball.gif" id="button" onclick="magicEight();">
</p>
<hr>
<div id="outputDiv"></div>
</div>
</body>
</html>
If you want to show and image you need to add the value of the randomoneof on a img tag not on a div tag. Change that and I think it will work
Demo: https://codepen.io/hienhuynhtm/pen/dpLgNr
<script>
var IMAGE_LIST = [
"http://balance3e.com/Images/happy.gif",
"http://balance3e.com/Images/sad.gif",
"http://balance3e.com/Images/surprised.gif"
];
function magicEight() {
var imgName = IMAGE_LIST[Math.floor(Math.random() * IMAGE_LIST.length)];
document.getElementById("randomImg").src = imgName;
}
</script>
<div style="text-align:center">
<h1> Magic 8-ball (Mattel, Inc.) </h1>
<p> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. </p>
<input type="text" id="questionBox" size=90 value="">
<p><input type="image" src="http://balance3e.com/Images/8ball.gif" id="button" onclick="magicEight();"></p>
<hr />
<img id="randomImg" />
</div>
Setting .value on outputDiv will not display images. You have to set the src attribute of an <img> tag.
Assuming all of the random images live in /Images, you could use the below as your new magicEight function.
function magicEight() {
var imgName;
imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]);
var imageTag = "<img src='/Images/" + imgName + "'>";
document.getElementById('outputDiv').innerHTML= imageTag;
}

get img src from input text id on load modal

How to pass input type image (name of pic) to img src inside div, when load modal?
<div class="form-group">
<label for="image" class="col-sm-2 control-label">
<?=l ang( 'image') ?>
</label>
<div class="col-sm-4">
<input type="image" id="pimage" width="300px">
</div>
</div>
<script>
var imageSrc = 'http://ricap.pt/encomendas/assets/uploads/' + pimage + '';
var input = document.getElementById('pimage');
input.src = imageSrc;
</script>
This show blank div and is getting the name of image
Pic url : http://ricap.pt/encomendas/assets/uploads/2774cc3506ee269c379b215d3a1876d5.jpg
The problem is you don't have a src="" in your tag, so you're trying to edit an attribute that isn't there. Add a blank attribute to your code like this:
<input src="" type="image" id="pimage" width="300px">
input.src doesn't add an attribute; it only changes what is already there.
As you mentioned in your comment, you could also do that with PHP like this:
<input src="assets/uploads/<?php echo $row->image; ?>" type="image" id="pimage" width="300px">
Try this:
var imageSrc = 'http://ricap.pt/encomendas/assets/uploads/' + pimage + '';
$('#pimage').parent().append('<img src="'imageSrc'">');

Javascript onblur affect from text box input to iframe?

I am trying to type a url into a form text input, and onBlur, update the contents of an included iframe with the webpage specified in the url. I can't seem to get it to work and I can't figure out why... :)
Can someone help me ?
Here is the code...
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script language="javascript" type="text/javascript" >
<!-- hide
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('myIframe');
var theUrl;
theUrl = document.getElementById("location");
theIframe.src = theUrl;
}
// end hide -->
</script>
</head>
<body><center>
<form id="form1" method="post">
<input type="text" style="width:150px;" name="location2" id="location" onBlur="setIframeSource();">
</form>
<table width="100%" height="100%" border="1">
<tr>
<td width="300"><iframe src="http://www.ibm.com" id="myIframe" width="280" height="300" name="frame1"></iframe></td>
</tr>
</table>
</center>
</body>
</html>
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('myIframe');
var theUrl;
theUrl = document.getElementById("location");
theIframe.src = theUrl;
}
Perhaps the problem is line 5 above -- it should read:
theUrl = document.getElementById("location").value;
Presently, you're assigning the input element itself to theUrl, which is not a valid value for theIframe.src!
try adding this after you set the iframe's src:
theIframe.contentDocument.location.reload(true);
and, get the value from the input:
document.getElementById('location').value;

Categories