如何解决尝试使用JS
我希望仅通过单击HTML中的img来显示HTML中的文本区域。我试图找出一种方法来使用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>
<!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>
解决方法
- 将文本从文本区域移至JavaScript函数
- 在文本区域中添加一个
id
,以便您可以定位 - 将此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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。