Attempting to make img in HTML clickable using JS

Question

I want the textarea in my HTML to only appear by clicking on the img in my HTML. I'm trying to figure out a way to do it using the onclick event in JS; 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>

IvanD · Accepted Answer · 2020-10-25 23:56:10Z

Move your text from the text area to the JavaScript function
Add an id to the textarea, so you can target it
Put this id into your getElementById function

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>

I'm not sure, based on his/her code, only the content was supposed to be hidden...

Collectives™ on Stack Overflow

Attempting to make img in HTML clickable using JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related