尝试使用 JS 使 HTML 中的 img 可点击
我希望我的 HTML 中的文本区域仅通过单击我的 HTML 中的 img 出现。我正在尝试找出一种使用 JS 中的 onclick 事件的方法；但我不太清楚该怎么做。有人对我的方法有什么建议吗？任何帮助将不胜感激。谢谢，麻烦您了。
<script>
function myFunction() {
document.getElementById("itg").innerHTML = ;
}
</script>
<style>
#itg{
height:150px;
width:150px;
border-radius:50%;
align:top;
}
body{
background-image:url("codercup.png"),linear-gradient(to right,white,#c3c3c3);
background-repeat: no-repeat;
background-size: 600px, 700px;
background-position:bottom,center;
}
li{
list-style-type:none;
padding:0;
margin:0;
font-size:20px;
}
h1{
text-align:center;
}
nav{
float:right;
height:500px;
}
.resume{
align:bottom-left;
}
</style>
繁星coding1回答
-
红颜莎娜
将文本从文本区域移动到 JavaScript 函数将 an 添加id到文本区域，以便您可以定位它将此 id 放入您的getElementById函数中function myFunction() { const textArea = document.createElement("textarea"); textArea.rows = 10 textArea.id = "text"; textArea.cols = 30; textArea.readonly = true; textArea.innerHTML = `I have been learning and creating web page content since 2015. I'm a part-time student in Information Technology with a concentration in web development, also a self taught developer. I have freelance experience creating multiple different projects (mostly front-end). I'm inspired of programming from the constant growth in technology. I enjoy creating things as I have always had an artistic mind; so mixing the passion of creativity, with my love for tech programming feels perfect for me.` const nav = document.getElementsByTagName("nav")[0]; const header = document.getElementsByTagName("header")[0]; header.insertBefore(textArea, nav);}<style>#itg { height: 150px; width: 150px; border-radius: 50%; align: top;}body { background-image: url("codercup.png"), linear-gradient(to right, white, #c3c3c3); background-repeat: no-repeat; background-size: 600px, 700px; background-position: bottom, center;}li { list-style-type: none; padding: 0; margin: 0; font-size: 20px;}h1 { text-align: center;}nav { float: right; height: 500px;}.resume { align: bottom-left;}</style><!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Evin McReynolds Portfolio</title></head><body> <header> <h1><strong>About Evin</strong></h1> <img src="ITguy.jpeg" id="itg" onclick="myFunction() " /> <nav> <ul class="link "> <li><a href="EMport.html ">Home</li></br> <li>About Evin</li></br> <li><a href="contactem.html ">Contact Evin</a></li> </br> <li><a href="skillsem.html ">Skills</a></li> </br> <li><a href="EvinPro.html ">Projects</a></li> </ul> </nav> </p> </header> <section> <embed src="evinITresume.pdf " width="350px " height="400px " class="resume " /> </section></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript