使用javascript onclick事件更改HTML文件中的元素_Javascript_Html

使用javascript onclick事件更改HTML文件中的元素

javascript html

使用javascript onclick事件更改HTML文件中的元素,javascript,html,Javascript,Html,这学期我一直在学习HTML和CSS，最初我开始用HTML和CSS编写我的项目，但为了让我的项目正常工作，我不得不将HTML页面相互链接。它最终生成了很多HTML页面，只是为了更改一行文本。我一直在尝试使用JavaScript来提高我的项目的效率。我的HTML代码如下所示： <!doctype html> <html> <head> <meta charset=utf-8> <title>Oakwood</titl

这学期我一直在学习HTML和CSS，最初我开始用HTML和CSS编写我的项目，但为了让我的项目正常工作，我不得不将HTML页面相互链接。它最终生成了很多HTML页面，只是为了更改一行文本。我一直在尝试使用JavaScript来提高我的项目的效率。我的HTML代码如下所示：

<!doctype html>

<html>
<head>
    <meta charset=utf-8>
    <title>Oakwood</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    <link rel=stylesheet type=text/css href=default.css>

</head>
<body>

<div id=back></div>
<div id=drdick></div>
<div id=choice></div>

<div class="typewriter">
<script src="run.js"></script>
<p id=text>While out running someone says “Hi” causing you to trip. He helps you up.</p>
</div>  

<div id=move>
<button type="button" onclick="changeThis()">Next</button>
</div>  

</body>
</html>

var quoteIndex = 0;
var quotes = [
    "Thank you.",
    "Are you ok?",
    "Yes, I’m not normally this clumsy"
];
function changeQuote() {
    ++quoteIndex;
    if (quoteIndex >= quotes.length) {
        quoteIndex = 0;
    }
    document.getElementById("text").innerHTML = quotes[quoteIndex];
}


function showPic() 
{document.getElementById("drdick").src="img/drdickab.png";}

function changeThis() {
    changeQuote();
    showPic();    
}

当我测试代码时，我的引用会更新我希望它们的方式。我的照片根本没出现。当谈到HTML和Javascript如何交互时，我有没有遗漏什么？我一直在浏览论坛，想找出我的错误，但我一直没有找到答案

您的图像没有显示，因为您没有在标记中的任何位置指定图像，而且您的javascript也不够。但是在你的身体标签里试试这个：

<body>

<!--replace your button with this code.-->

<div id=move>
<button type="button" onclick="showMyImage();" value="Next"></button>
</div>  

<!--I assumed you will display the image just below your button, note that initially your image is hidden and displayed on button click event-->
<div>
<img id="myImage" src="img/drdickab.png" style="visibility:hidden"/>  
</div>
</body>


函数showMyImage（）{
document.getElementById（'myImage'）.style.visibility=“visible”；
}

id应该有引号

id=“text”

我在HTML文件中更改了引号。我的图像仍然不起作用是的，我看到它起作用了，只是让我发痒。您的drdick div应该是一个

标记，div不知道如何处理src attributeokay。因为我没有在CSS中分配图像，所以我需要的不仅仅是div标记。我是否只为标签分配一个Id？更新我继续，给我的标签分配了一个Id，它成功了。非常感谢。是的，干得好！

  <!--There's really no need to have multiple scripts, just one will do the job-->

<script type="text/javascript">
  function showMyImage(){
     document.getElementById('myImage').style.visibility="visible";
}
</script>