How would I make my textarea disappear once clicked

Question

I made a post a short while ago asking for help with making my img clickable to show a textarea when clicked. I got the answer I was looking for only thing is, now I can't figure out how to make it disappear once I re-click the img. Everytime I click the img it creates duplicate textareas. I tried figuring it out on my on but I can't get it. Can anyone help me out? Please and Thank you.

 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); }

 #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; }

 <!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"class="itg" 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>

Answer 1

You need to try to find the textarea by id. If it exists, you remove it and stop/return the function. If it is not found, you continue with creating the textarea.

 function myFunction() { const exists = document.getElementById("text"); if (exists) { exists.remove(); return; } 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" class="itg" 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>

How would I make my textarea disappear once clicked

Question

1 answers

solution1
2 ACCPTED 2020-10-26 01:48:08

How would I make my textarea disappear once clicked

Question

1 answers

solution1 2 ACCPTED 2020-10-26 01:48:08

solution1
2 ACCPTED 2020-10-26 01:48:08