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

Question

I want the textarea in my HTML to only appear by clicking on the img in my HTML.我希望 HTML 中的 textarea 仅通过单击我的 HTML 中的 img 出现。 I'm trying to figure out a way to do it using the onclick event in JS;我试图找出一种方法来使用 JS 中的 onclick 事件； but I can't quite figure out how to do it.但我不太明白该怎么做。 Does anyone have any suggestions on how I can?有没有人对我的方法有什么建议？ Any help would be greatly appreciated.任何帮助将不胜感激。 Please and Thank you.谢谢，麻烦您了。

 <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

Move your text from the text area to the JavaScript function将文本从文本区域移动到 JavaScript 函数
Add an id to the textarea, so you can target it给 textarea 添加一个id ，这样你就可以定位它
Put this id into your getElementById function将此 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