尝试使用 JS 使 HTML 中的 img 可点击

Question

我希望 HTML 中的 textarea 仅通过单击我的 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>

 <!DOCTYPE html> <html lang="en"> <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()"/> <textarea readonly name="message" rows="10" cols="30" id="text"> 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. </textarea> <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>

Answer 1

将文本从文本区域移动到 JavaScript 函数
给 textarea 添加一个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 lang="en"> <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>

尝试使用 JS 使 HTML 中的 img 可点击

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-10-25 23:44:01

尝试使用 JS 使 HTML 中的 img 可点击

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-10-25 23:44:01

解决方案1
1 已采纳 2020-10-25 23:44:01