Using image tag to pass a function with 'onclick'
Question
This piece of code should change the text in a paragraph when the image is clicked. However, the onclick function does not work and the text remains the same. Please see the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<main class="tvfull">
<p id="text"> myname </p>
<section class="tv">
<img class="tv" src="img/television.png">
</section>
</main>
<main class="remote">
<section class="remote">
<img class="remote" src="img/remote_base.png">
</section>
<section class="buttons">
<img src="img/button_me.png" onclick="change()" id="me">
</section>
</main>
</body>
</html>
JS:
// check if page is fully loaded
window.onload = function() {
}
function change(){
document.getElementById("text").innerHTML = "You clicked the button";
}
3 answers
solution1
1 ACCPTED 2021-01-08 19:15:58
<main class="tvfull"> <p id="text"> to be changed </p> </main> <section class="buttons"> <img id="me" src="https://images.pexels.com/photos/3804997/pexels-photo-3804997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" onclick="change()"> </section> <script> function change() { document.getElementById("text").innerHTML = "text changed!" } </script>
Can you share the full source code? I tried it and it worked fine. Did you wrap your JavaScript function in a script tag?
solution2
0 2021-01-08 19:18:54
Try adding a div outside the image and move the onclick on it like so:
<section class="buttons">
<div onclick="change()"><img id="me" src="img/button_me.png"></div>
</section>
however it should work fine on img too
solution3
0 2021-01-08 19:31:54
Your code is working.
It might be worth thinking about changing how you are triggering the event, inline onclick events can be hard to track. You could use jquery to add a click event to the image tag by using the reference $("img#me") (this finds all img tags with an id me , bearing in mind ids should be unique so you could just use $("#me") ).
You can also select the paragraph to change in the same way, using the selector $("#text") and then the function .text() to change the text within it or .html() if you require that funcitonality.
I've also used a link to a placeholder image for the purposes of the answer.
// Attach click event to 'img' tag with id 'me' $("img#me").click(function() { // Change text $("#text").text("You clicked the button"); // Or you can use the following if you need to add HTML: //$("#text").html("You clicked the button"); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main class="tvfull"> <p id="text"> to be changed</p> </main> <section class="buttons"> <img id="me" src="https://via.placeholder.com/150"> </section>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.