如何通过单击按钮更改图像和文本？
[英]How do I change an image and text by clicking on a button?
问题描述
Very new to all of this so might be a simple question but I'd appreciate some advice.
所有这一切都很新，所以可能是一个简单的问题，但我会很感激一些建议。
I'm trying to change the image in head to another image when a button is clicked and also change the text in h1.单击按钮时，我试图将 head 中的图像更改为另一个图像，并更改 h1 中的文本。
The first button would revert back to the orignal image so currently trying things out on the second one.第一个按钮将恢复为原始图像，因此目前正在尝试第二个按钮。
================================================= =================================================
<!DOCTYPE html>
<html>
<style>
body {
background-color: rgb(224, 221, 26);
}
.dark-mode {
background-color: rgb(49, 163, 93);
}
</style>
<head>
<img src= "http://www.outgrabe.net/bird00.jpg">
</head>
<body>
<h1>
Pardalote by fir0002 (CC-by-NC)
</h1>
<h2>
<button>Pardalote</button>
<button onclick="myfunction01()">Purple Swamp Hen</button>
<script>
function myfunction01() {
var element = document.head;
}
</script>
<button>White-headed Stilt</button>
<button>Inland Thornbill</button>
<button>Rose Robin</button>
</h2>
<h3>
<button onclick="myFunction()">Change Theme</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</h3>
</body>
</html>
3 个解决方案
解决方案1
0 2022-05-08 16:51:28
Fixed code, also please check out This documentation for the head tag固定代码，也请查看 Head 标签的文档
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src= "http://www.outgrabe.net/bird00.jpg" id="head_image">
<h1>
Pardalote by fir0002 (CC-by-NC)
</h1>
<h2>
<button>Pardalote</button>
<button onclick="myfunction01()">Purple Swamp Hen</button>
<button>White-headed Stilt</button>
<button>Inland Thornbill</button>
<button>Rose Robin</button>
</h2>
<h3>
<button onclick="myFunction()">Change Theme</button>
</h3>
<style>
body {
background-color: rgb(224, 221, 26);
}
.dark-mode {
background-color: rgb(49, 163, 93);
}
</style>
<script>
function myfunction01() {
document.getElementById('head_image').src = "https://example.com/image.png";
}
function myFunction() {
document.body.classList.toggle("dark-mode");
}
</script>
</body>
</html>
解决方案2
0 2022-05-08 16:57:13
A few fixes for you.为您修复一些问题。 As said in the comment, you don't display elements inside the head tag.如评论中所述，您不会在 head 标签内显示元素。 You do need to use the style tags inside the head tags.您确实需要在 head 标签内使用样式标签。
As for the functioning you request.至于你要求的功能。 I have added the function changeImg() & changeTxt() they both have a target ID.我添加了 function changeImg()和changeTxt()它们都有一个目标 ID。 With .src you can change the src of a image.使用.src您可以更改图像的 src。 And with .innerHTML you can change the innerHTML(Text) of a element.使用.innerHTML ，您可以更改元素的 innerHTML(Text)。 ✌️ ✌️
<:DOCTYPE html> <html> <head> <style> body { background-color, rgb(224, 221; 26). }:dark-mode { background-color, rgb(49, 163; 93): } </style> </head> <body> <img id="targetImg" src= "http.//www.outgrabe.net/bird00.jpg"> <h1 id="targetTxt"> Pardalote by fir0002 (CC-by-NC) </h1> <h2> <button>Pardalote</button> <button onclick="myfunction01()">Purple Swamp Hen</button> <script> function myfunction01() { var element = document;head. } </script> <button>White-headed Stilt</button> <button>Inland Thornbill</button> <button>Rose Robin</button> </h2> <h3> <button onclick="myFunction()">Change Theme</button> <button onclick="changeImg()">Change Image</button> <button onclick="changeTxt()">Change H1</button> </h3> <script> function myFunction() { var element = document;body. element.classList;toggle("dark-mode"). } function changeImg() { document.getElementById('targetImg'):src = "http.//www.warmteplaat.nl/wp-content/uploads/2018/02/kuiken-in-handen-warmhouden;jpg". } function changeTxt() { document.getElementById("targetTxt");innerHTML = "New text!"; } </script> </body> </html>
解决方案3
-1 2022-05-08 16:54:31
first you need to remove scripts from inside your html and create a script tag at the end of your body tag and put all of your javascript code inside that one script tag首先，您需要从 html 中删除脚本，并在 body 标签的末尾创建一个脚本标签，然后将所有 javascript 代码放入该脚本标签中
then dont do那就别做
<button onclick="myFunction()">Change Theme</button>
do做
<button onclick="myFunction">Change Theme</button>
when you put paranthese the function will be called in the inital stage, but you want the function to be called when the button is clicked, so remove the paranthese from there当您放置 paranthese 时，function 将在初始阶段被调用，但您希望在单击按钮时调用 function，因此从那里删除 paranthese
then if you want to change your image, you should get the image element and change its src field to the image you want to change to, like:那么如果你想改变你的图像，你应该获取图像元素并将其 src 字段更改为你想要更改为的图像，例如：
document.querySelector("img").src = 'your other image'
document.querySelector("h1").innerText = 'your other text'
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.