我可以通过Javascript函数将图像添加到HTML正文吗？

Question

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

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

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

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

Answer 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（级联样式表）处理。 Web上有大量资源，可了解有关DOM和CSS的更多信息。

我可以通过Javascript函数将图像添加到HTML正文吗？

问题描述

2 个解决方案

解决方案1
1 2015-09-27 22:55:21

解决方案2
0 已采纳 2015-09-27 23:09:14

我可以通过Javascript函数将图像添加到HTML正文吗？

问题描述

2 个解决方案

解决方案1 1 2015-09-27 22:55:21

解决方案2 0 已采纳 2015-09-27 23:09:14

解决方案1
1 2015-09-27 22:55:21

解决方案2
0 已采纳 2015-09-27 23:09:14