Question

我在初学者编程课程中。我们只在第4章，所以请记住这一点。这个类使用了一些javascript的HTML，我们还没有真正深入到javascript。我本周的项目是创建两个按钮，当点击这些按钮中的每个按钮时，会出现一张照片和一个段落。我有一个段落的按钮，但我无法弄清楚如何添加图像。我在互联网上发现的一切都是超级javascript，我还没有学到的东西。这是我的代码，我刚选了一个随机主题，哈哈

<!doctype html>
<!--Web page that displays quotes at the click of a button click. -->
<!--============================================================= -->
<html>

<head>
  <title>Project2</title>
</head>

<body>
  <div style="text-align:center">
    <p>
      <h2> <span style="color:red">Favorite Animals</span> </h2>
    </p>


    <input type="button" value="Slow Loris" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='white';" onclick="document.getElementById('outputDiv').innerHTML=
    'This animal might look like a harmless, big-eyed baby ewok, but ' +
    'the slow loris is one of the only venomous mammals in the world. ' +
    'Its subtle nature makes it popular in the illegal pet trade, but this ' +
    'furry creature also carries a toxin that is released from the brachial ' +
    'gland on the sides of its elbows. If threatened, the loris can take ' +
    'the toxin into its mouth and mix it with saliva. The animal may also ' +
    'lick or rub its hair with this mixture to deter predators from attack. ' +
    'The toxin can cause death by anaphylactic shock in some people.';">

    <input type="button" value="Sloth" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='white';" onclick="document.getElementById('outputDiv').innerHTML=
    'Sloths—the sluggish tree-dwellers of Central and South America—spend ' +
    'their lives in the tropical rain forests. They move through the canopy ' +
    'at a rate of about 40 yards per day, munching on leaves, twigs and buds. ' +
    'Sloths have an exceptionally low metabolic rate and spend 15 to 20 hours ' +
    'per day sleeping. And surprisingly enough, the long-armed animals are ' + 
    'excellent swimmers. They occasionally drop from their treetop perches ' +
    'into water for a paddle.';">
  </div>
  <div id="outputDiv"></div>
</body>

</html>

Answer 1

您可以使用<img>的'style'属性来实现您的目标。在样式属性中，您可以设置display:none，以隐藏<img>。要使其再次可见，只需在单击按钮时将显示更改回display:inline。请尝试以下方法：

<!doctype html>
<!--Web page that displays quotes at the click of a button click. -->
<!--============================================================= -->
<html>
<head>
 <title>Project2</title>
</head>
<body>
<div style="text-align:center">
<p>
<h2> <span style="color:red">Favorite Animals</span> </h2>
<img id='slow' src='slowLoris.jpg' alt='Slow Loris' style='width:200px;height:150px;display:none;'>
<img id='sloth' src='sloth.jpg' alt='Sloth' style='width:200px;height:150px;display:none;'>
</p>


<input type="button" value="Slow Loris"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='white';"
onclick="
document.getElementById('sloth').style='width:200px;height:150px;display:none;'
document.getElementById('slow').style='width:200px;height:150px;display:inline;'
document.getElementById('outputDiv').innerHTML=
'This animal might look like a harmless, big-eyed baby ewok, but ' +
'the slow loris is one of the only venomous mammals in the world. ' +
'Its subtle nature makes it popular in the illegal pet trade, but this ' +
'furry creature also carries a toxin that is released from the brachial ' +
'gland on the sides of its elbows. If threatened, the loris can take ' +
'the toxin into its mouth and mix it with saliva. The animal may also ' +
'lick or rub its hair with this mixture to deter predators from attack. ' +
'The toxin can cause death by anaphylactic shock in some people.';">

<input type="button" value="Sloth"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='white';"
onclick="
document.getElementById('slow').style='width:200px;height:150px;display:none';
document.getElementById('sloth').style='width:200px;height:150px;display:inline;'
document.getElementById('outputDiv').innerHTML=
'Sloths—the sluggish tree-dwellers of Central and South America—spend ' +
'their lives in the tropical rain forests. They move through the canopy ' +
'at a rate of about 40 yards per day, munching on leaves, twigs and buds. ' +
'Sloths have an exceptionally low metabolic rate and spend 15 to 20 hours ' +
'per day sleeping. And surprisingly enough, the long-armed animals are ' + 
'excellent swimmers. They occasionally drop from their treetop perches ' +
'into water for a paddle.'"> 
</div>
<div id="outputDiv"></div>
</body>
</html>

修改
如果您不介意稍微改变一下代码，那么更清晰的解决方案是：

<!doctype html>
<!--Web page that displays quotes at the click of a button click. -->
<!--============================================================= -->
<html>
<head>
 <title>Project2</title>
</head>
<body style='text-align:center'>

<h2> <span style="color:red">Favorite Animals</span> </h2>

<div id='slow' style='text-align:center;display:none'>     
    <img src='slowLoris.jpg' alt='Slow Loris'>
    <p>This animal might look like a harmless, big-eyed baby ewok, but 
        the slow loris is one of the only venomous mammals in the world.
        Its subtle nature makes it popular in the illegal pet trade, but this 
        furry creature also carries a toxin that is released from the brachial 
        gland on the sides of its elbows. If threatened, the loris can take 
        the toxin into its mouth and mix it with saliva. The animal may also 
        lick or rub its hair with this mixture to deter predators from attack. 
        The toxin can cause death by anaphylactic shock in some people.</p>
</div>

<div id='sloth' style='text-align:center;display:none'>    
    <img src='sloth.jpg' alt='Sloth'>
    <p> Sloths—the sluggish tree-dwellers of Central and South America—spend
        their lives in the tropical rain forests. They move through the canopy
        at a rate of about 40 yards per day, munching on leaves, twigs and buds. 
        sloths have an exceptionally low metabolic rate and spend 15 to 20 hours
        per day sleeping. And surprisingly enough, the long-armed animals are 
        excellent swimmers. They occasionally drop from their treetop perches 
        into water for a paddle.</p>
</div>


<input type="button" value="Slow Loris"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='white';"
onclick="
document.getElementById('slow').style='text-align:center;display:inline';
document.getElementById('sloth').style='text-align:center;display:none'">

<input type="button" value="Sloth"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='white';"
onclick="
document.getElementById('sloth').style='text-align:center;display:inline';
document.getElementById('slow').style='text-align:center;display:none'">

</div>
</body>
</html>

Answer 2

简单地把图像放在里面，参见jsfiddle

<input type="button" value="Slow Loris"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='white';"
onclick="document.getElementById('outputDiv').innerHTML=
'<img src=https://www.thepharmaletter.com/media/image/actavis-logo-small.jpg>' +
'This animal might look like a harmless, big-eyed baby ewok, but ' +
'the slow loris is one of the only venomous mammals in the world. ' +
'Its subtle nature makes it popular in the illegal pet trade, but this ' +
'furry creature also carries a toxin that is released from the brachial ' +
'gland on the sides of its elbows. If threatened, the loris can take ' +
'the toxin into its mouth and mix it with saliva. The animal may also ' +
'lick or rub its hair with this mixture to deter predators from attack. ' +
'The toxin can cause death by anaphylactic shock in some people.';">

https://jsfiddle.net/bxcz3f8g/

Answer 3

正如属性名称所示，innerHTML可以是完整的HTML内容，而不仅仅是文本。您可以在其中放置任何有效的HTML。根据良好实践，您应该将这些操作写在单独的js文件中并导入它。

＆＃13;

function addContent(event) {
  document.getElementById('outputDiv').innerHTML =
    '<img width="80" src="https://i.ytimg.com/vi/n7gcats5uCQ/maxresdefault.jpg"/><br/><p>Sloths—the sluggish tree-dwellers of Central and South America—spend ' +
    'their lives in the tropical rain forests. They move through the canopy ' +
    'at a rate of about 40 yards per day, munching on leaves, twigs and buds. ' +
    'Sloths have an exceptionally low metabolic rate and spend 15 to 20 hours ' +
    'per day sleeping. And surprisingly enough, the long-armed animals are ' +
    'excellent swimmers. They occasionally drop from their treetop perches ' +
    'into water for a paddle.</p>'
}

＆＃13;

<button onClick="addContent()">Sloth</button>
<div id="outputDiv" />

＆＃13;

Answer 4

您需要使用图片标记<img>来插入图片，例如

<img src="https://www.internationalanimalrescue.org/sites/default/files/sumatran_slow_loris.jpg">

此处src的值指向图像的来源。您也可以在计算机中使用一个（只需从html文件中指定其相对路径）。

其他几点。您可以使用<button>创建按钮。 <input>用于创建用户输入字段。最好将HTMl与您的Javascript代码分开，然后只需将其显示属性与您的代码切换（如果您已经学习了代码，也可以将这些代码移到与创建按钮不同的位置））。

＆＃13;

<div style="text-align:center">
<p>
<h2> <span style="color:red">Favorite Animals</span> </h2>
</p>


<button type="button" 
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='white';"
onclick="document.getElementById('outputDiv1').style.display = 'block'; document.getElementById('outputDiv2').style.display = 'none'">Slow Loris</button>

<button type="button" 
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='white';"
onclick="document.getElementById('outputDiv2').style.display = 'block';
document.getElementById('outputDiv1').style.display = 'none'"> Sloth</button>

</div>

<div id="outputDiv1" style="display:none">slow loris<img src="https://www.internationalanimalrescue.org/sites/default/files/sumatran_slow_loris.jpg" alt="loris" height="100" width="140"></div>
<div id="outputDiv2" style="display:none">sloth<img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/Q-Z/sloth-beach-upside-down.adapt.945.1.jpg" alt="sloth" height="100" width="140"></div>

＆＃13;

带有文字和图像的HTML按钮

4 个答案: