我可以从Javascript函数向HTML正文添加图像吗

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

本文关键字：正文 添加 图像 HTML Javascript 函数 我可以      更新时间：2023-09-26

一旦total的值达到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>

您没有监听更改。你只是定义了函数。。。。但你需要一些东西来触发它们。

此事件列表器在网站加载后执行回调函数[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>');
});

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

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

宽度和高度的图像标记属性不采用javascript表达式。在你的专业水平上，我建议用CSS样式隐藏图像元素，当你想显示图像时，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的信息。

相关文章：