How do I change an image and text by clicking on a button?-CodePudding

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.

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>

CodePudding user response：

Fixed code, also please check out This documentation for the head tag

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

CodePudding user response：

A few fixes for you. As said in the comment, you don't display elements inside the head tag. You do need to use the style tags inside the head tags.

As for the functioning you request. I have added the function changeImg() & changeTxt() they both have a target ID. With .src you can change the src of a image. And with .innerHTML you can change the innerHTML(Text) of a element. ✌️

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

CodePudding user response：

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

then dont do

<button onclick="myFunction()">Change Theme</button>

<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

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:

document.querySelector("img").src = 'your other image'
document.querySelector("h1").innerText = 'your other text'