Can I add an image to an HTML body from a Javascript function?

Question

I'm trying to add an image to the HTML body once the value of total reaches ten. I tried calling functions from the line where the image gets initialized where the width and height is returned as 0 unless the value is ten. But after tweaking those lines a bit, I've only been able to make the image appear or not appear when the page loads, not adding it after the page has loaded. I'm new to HTML and Javascript, so I'm not exactly sure how they work together yet.

<html>
<head><title>
Number Builder JavaScript
</title>
<script>
a1 = new Array (
    'field1', 'field2', 'field3', 'field4', 'field5', 'field6', 'field7', 'field8' )

a2 = new Array(
    5, 10, 15, 100, 245, 300, 500, 750 )

function compute() {
   total = 0
   for ( i=0; i<a2.length; i++ ) {
      if ( document.NumberBuilder[a1[i]].checked ) {
         total += a2[i]
      }
   }
   document.NumberBuilder.result.value=total
}
</script>

</head>
<body>
<form name="NumberBuilder">

<h2>
Number Builder
</h2>

Sum up the numbers to the year the University of Miami was founded to see a photo of the UM campus.

<p>
<b>Need a hint?</b>
<ul>
   <li>Try checking all the boxes</li>
</ul>

<menu>
<table>
<script>
function makeCheckbox ( i ) {
   document.write('<input type=checkbox name="', 
   a1[i], '" onClick=compute()>' ) 
}

for ( i=0; i<a1.length; i++) {
   document.write("<tr><td>")
   makeCheckbox(i)
   document.write("</td><td>", a2[i], "</td></tr>" )
}

document.write('<tr><td colspan=2>-------------------</td></tr>') 
document.write('<tr><td><input type=text name="result" size=4 value=0>') 
document.write('</td><td>Total</td></tr>')
</script>
</table>
</menu>
</form>

<img src="https://upload.wikimedia.org/wikipedia/commons/3/3e/University_of_Miami_Otto_G._Richter_Library.jpg" alt="UM campus" width=checkForWidth() height=checkForHeight()>
<script>
function checkForWidth(){
    if (document.NumberBuilder.result.value == 10){
        return "1280";
    }else{   
        return "0";
    }
}
function checkForHeight(){
    if (document.NumberBuilder.result.value == 10){
        return "960";
    }else{   
        return "0";
    }
}
</script>

</body>
</html>

EDIT: i used the display none and called a function to change the display to block

<html>
<head><title>
Number Builder JavaScript
</title>
<style>
    .hidden{
        display: none;
    }
</style>
<script>
a1 = new Array (
    'field1', 'field2', 'field3', 'field4', 'field5', 'field6', 'field7', 'field8' )

a2 = new Array(
    5, 10, 15, 100, 245, 300, 500, 750 )

function compute() {
   total = 0
   for ( i=0; i<a2.length; i++ ) {
      if ( document.NumberBuilder[a1[i]].checked ) {
         total += a2[i]
      }
   }
   document.NumberBuilder.result.value=total
   if (document.NumberBuilder.result.value == 1925){
        showPicture();
    }
}

function showPicture(){
    document.getElementById("campus").style.display = "block";
}
</script>

</head>
<body>
<form name="NumberBuilder">

<h2>
Number Builder
</h2>

Sum up the numbers to the year the University of Miami was founded to see a photo of the UM campus.

<p>
<b>Need a hint?</b>
<ul>
   <li>Try checking all the boxes</li>
</ul>

<menu>
<table>
<script>
function makeCheckbox ( i ) {
   document.write('<input type=checkbox name="', 
   a1[i], '" onClick=compute()>' ) 
}

for ( i=0; i<a1.length; i++) {
   document.write("<tr><td>")
   makeCheckbox(i)
   document.write("</td><td>", a2[i], "</td></tr>" )
}

document.write('<tr><td colspan=2>-------------------</td></tr>') 
document.write('<tr><td><input type=text name="result" size=4 value=0>') 
document.write('</td><td>Total</td></tr>')
</script>
</table>
</menu>
</form>
<div class="hidden" id="campus">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3e/University_of_Miami_Otto_G._Richter_Library.jpg" id="campus" alt="UM campus" width="1280" height="960">
</div>

</body>
</html>

I believe [this question](http://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript-or-jquery) is what you're looking for. — thele101, Sep 27 '15 at 22:40

score 1 · Answer 1 · answered Sep 27 '15 at 22:55

Your not listening for changes. You merely defined functions....but you need something to trigger them.

This event listerner executes a callback function[makeCheckbox] after the website loads:

document.addEventListener("DOMContentLoaded", function makeCheckbox ( i ) {
   document.write('<input type=checkbox name="', 
   a1[i], '" onClick=compute()>' ) 


for ( i=0; i<a1.length; i++) {
   document.write("<tr><td>")
   makeCheckbox(i)
   document.write("</td><td>", a2[i], "</td></tr>" )
}

document.write('<tr><td colspan=2>-------------------</td></tr>') ;
document.write('<tr><td><input type=text name="result" size=4 value=0>') ;
document.write('</td><td>Total</td></tr>');
});

There is alot of wrong in this code to fix, but the important thing is to trigger the function that creates the content.

score 0 · Accepted Answer · answered Sep 27 '15 at 23:09

<img ... width=checkForWidth() height=checkForHeight()>

Image tag attributes for width and height do not take javascript expressions. At your level of expertise I would suggest hiding the image element with CSS styles which are changed in javascript when you want to show the image.

A quite basic approach might be

<img id="UofM" src="...." style="width:320px; height:640px; visibility:hidden;" >

<script>
function showPicture()
{  document.getElementById("UofM").style.visibility="visible";
}
</script>

meaning you call showPicture when you want to make the image visible.

Note that document.write() was largely used in the past to create dynamic pages but has largely been replaced by API calls to manipulate the DOM (document object model) of a page. Document.write is only useful while the page loads - it is not designed to modify the page after load. Page element styling is handled by CSS (cascading style sheets). There are abundant resources on the web to learn more about the DOM and CSS.

Can I add an image to an HTML body from a Javascript function?

2 Answers2