为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

繁星coding 2023-06-09 17:18:58
我希望我的 HTML 中的文本区域仅通过单击我的 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>
查看完整描述

1 回答

?
红颜莎娜

TA贡献1842条经验 获得超12个赞

  1. 将文本从文本区域移动到 JavaScript 函数

  2. 将 an 添加id到文本区域,以便您可以定位它

  3. 将此 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>


<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>


查看完整回答
反对 回复 2023-06-09
  • 1 回答
  • 0 关注
  • 167 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信