我可以从 Javascript 函数将图像添加到 HTML 正文吗？答案

【问题标题】：Can I add an image to an HTML body from a Javascript function?我可以从 Javascript 函数将图像添加到 HTML 正文吗？
【发布时间】：2015-12-25 03:19:44
【问题描述】：

我正在尝试在总的值达到 10 时将图像添加到 HTML 正文。我尝试从初始化图像的行调用函数，其中宽度和高度返回为 0，除非值为 10。但是在稍微调整了这些行之后，我只能在页面加载时使图像出现或不出现，而不是在页面加载后添加它。我是 HTML 和 Javascript 的新手，所以我还不确定它们是如何协同工作的。

<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>

编辑：我使用显示无并调用函数将显示更改为阻止

<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>

【问题讨论】：

我相信this question 就是您要找的。span>

标签： javascript html image

【解决方案1】：

你不听变化。你只是定义了函数……但你需要一些东西来触发它们。

此事件监听器在网站加载后执行回调函数[makeCheckbox]：

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>');
});

这段代码有很多错误需要修复，但重要的是触发创建内容的函数。

【讨论】：

【解决方案2】：

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

宽度和高度的图像标记属性不采用 javascript 表达式。根据您的专业水平，我建议您使用 CSS 样式隐藏图像元素，当您想要显示图像时，这些样式会在 javascript 中更改。

一个非常基本的方法可能是

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

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

意思是当你想让图像可见时调用 showPicture。

请注意，document.write() 过去主要用于创建动态页面，但在很大程度上已被 API 调用所取代，以操作页面的 DOM（文档对象模型）。 Document.write 仅在页面加载时有用 - 它并非旨在在加载后修改页面。页面元素样式由 CSS（级联样式表）处理。网络上有丰富的资源可以了解有关 DOM 和 CSS 的更多信息。

【讨论】：