单击后如何使我的文本区域消失

Question

不久前我做了一个 post 寻求帮助使我的 img 可点击以在点击时显示文本区域。我得到了我一直在寻找的答案，现在我无法弄清楚如何在我重新单击 img 后让它消失。每次我单击 img 时，它都会创建重复的文本区域。我试着在我的电脑上弄清楚，但我无法理解。谁能帮我吗？请谢谢。

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

您需要尝试通过id 找到textarea。如果存在，则将其删除并 stop/return 函数。如果未找到，则继续创建文本区域。

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

html

javascript

css

textarea

image