Cat function isn't being called

Question

I'm trying to get the functions cat, dog and frog to work, but for some reason they aren't being called when the button is clicked. The functions should be working properly but I'm not sure if it's a tag I've missed or a problem with my code. Any idea what might be the cause of this? The first line should display the text in it in the text field, the 2nd one should display that plain text in the tag and the third should display that image. (I deleted some writing because it had personal details.)

    <html>
    <head>
    <script>
       function AlertStudent() {
            alert("");
        }

        function ConsoleStudent() {
            console.log("");
        }

        function ShowStudent() {
            var x = document.getElementById("student");
            x.style.display = "block";
        }

        function HideStudent() {
            var x = document.getElementById("student");
            x.style.display = "none";
        }

        function AlertSubject() {
            alert("");
        }

        function ConsoleSubject() {
            console.log("");
        }

        function ShowSubject() {
            var x = document.getElementById("subject");
            x.style.display = "block";
        }

        function HideSubject() {
            var x = document.getElementById("subject");
            x.style.display = "none";
        }

        function AlertAssignment() {
            alert("Assignment 4 - 14th September 2019");
        }

        function ConsoleAssignment() {
            console.log("Assignment 4 - 14th September 2019");
        }

        function ShowAssignment() {
            var x = document.getElementById("assignment");
            x.style.display = "block";
        }

        function HideAssignment() {
            var x = document.getElementById("assignment");
            x.style.display = "none";
        }

        function AlertLab() {
            alert("Wednesday 8:30-10:30");
        }

        function ConsoleLab() {
            console.log("Wednesday 8:30-10:30");
        }

        function ShowLab() {
            var x = document.getElementById("lab");
            x.style.display = "block";
        }

        function HideLab() {
            var x = document.getElementById("lab");
            x.style.display = "none";
        }

        function SwitchParagraphs() {
            var p1Text = p1.textContent;
            p1.textContent = p2.textContent;
            p2.textContent = p1Text;
        }

        function Cat() {
            document.getElementById("myText").value = "User clicks Cat";

            var displaySpan = document.getElementById("display");
            displaySpan.innerHTML = "Cat is clicked";

            var image = document.getElementById("displayImg");
            image.src = "cat.png";
        }

        function Dog() {
            document.getElementById("myText").value = "User clicks Dog";

            var displaySpan = document.getElementById("display");
            displaySpan.innerHTML = "Dog is clicked";

            var image = document.getElementById("displayImg");
            image.src = "dog.png";
        }

        function Frog() {
            document.getElementById("myText").value = "User clicks Frog";

            var displaySpan = document.getElementById("display");
            displaySpan.innerHTML = "Frog is clicked";

            var image = document.getElementById("displayImg");
            image.src = "frog.png";
        }
    </script>
    </head>

    <body>
    <div id="student"></div>
    <button onClick="ShowStudent()">Show</button>
    <button onClick="HideStudent()">Hide</button>
    <button onClick="AlertStudent()">Alert</button>
    <button onClick="ConsoleStudent()">Console</button>
    </br>
    </br>
    <div id="subject"></div>
    <button onClick="ShowSubject()">Show</button>
    <button onClick="HideSubject()">Hide</button>
    <button onClick="AlertSubject()">Alert</button>
    <button onClick="ConsoleSubject()">Console</button>
    </br>
    </br>
    <div id="assignment">Assignment 4 - 14th September 2019</div>
    <button onClick="ShowAssignment()">Show</button>
    <button onClick="HideAssignment()">Hide</button>
    <button onClick="AlertAssignment()">Alert</button>
    <button onClick="ConsoleAssignment()">Console</button>
    </br>
    </br>
    <div id="lab">Wednesday 8:30-10:30</div>
    <button onClick="ShowLab()">Show</button>
    <button onClick="HideLab()">Hide</button>
    <button onClick="AlertLab()">Alert</button>
    <button onClick="ConsoleLab()">Console</button>
    </br>
    </br>
    <hr />
    <p id="p1"></p>
    <button onClick="SwitchParagraphs()">Switch Paragraphs</button>
    <p id="p2"></p>
    <hr />
    <button onClick="Cat()">Cat</button>
    <button onClick="Dog()">Dog</button>
    <button onClick="Frog()">Frog</button>
    </br>
    </br>
    <input type="text" name="myText" />
    </br>
    </br>
    <span id="display"></span>
    </br>
    </br>
    <img id="displayImg" />
    </body>

    </html>

*I'm trying to get these three functions to work* <-- There's way more than 3 functions here. Which ones are you having trouble with? — Scott Marcus, Sep 14 '19 at 00:34
There is no such tag as ``. It's just `
`. And, [don't use self-terminating tags](https://stackoverflow.com/questions/46939538/difference-between-script-src-foo-js-script-and-script-src-foo-js/46939597#46939597) like
. — Scott Marcus, Sep 14 '19 at 00:39
There's quite a lot wrong with your code, starting with how unnecessarily convoluted you've made it. [Don't use inline event attributes](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991) or inline styles. Also, there's no reason for all those functions. The cat, dog, and frog functions can and should all be combined into a single function since they all to essentially the same thing. You just pass an argument to the function for cat, dog, or frog so the function knows what data to work with. — Scott Marcus, Sep 14 '19 at 00:42
You've also got a stray back tick in front of your first function, which is causing a syntax error. — Scott Marcus, Sep 14 '19 at 00:45
Just before `function AlertStudent`. But, there's a lot more wrong that just that. — Scott Marcus, Sep 14 '19 at 00:53
Ok nvm, I got what you meant, that was put there by accident when i posted it, it's not in my proper code. — John DOe, Sep 14 '19 at 01:03

Daniel Barral · Accepted Answer · 2019-09-14T01:34:07.030

2

On the line below, you are trying to get the HTML element by id ("myText"):

document.getElementById("myText").value = "User clicks Cat";

But there is no HTML element with this id.

In the input tag, you must set the id attribute of the HTML element, not the name.

Replace this line:

<input type="text" name="myText" />

With this line:

<input type="text" id="myText" />

edited Sep 14 '19 at 01:34

answered Sep 14 '19 at 01:28

Daniel Barral

3,896
2
35
47

Cat function isn't being called

1 Answers1