Question

我正在尝试使猫，狗和青蛙功能正常工作，但是由于某些原因，当单击按钮时它们没有被调用。这些功能应该可以正常工作，但是我不确定这是我错过的标签还是代码出现问题。知道这可能是什么原因吗？第一行应在文本字段中显示其中的文本，第二行应在标记中显示该纯文本，第三行应显示该图像。（我删除了一些文字，因为其中包含个人详细信息。）

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

Answer 1

在下面的行中，您尝试通过id（“ myText”）获取HTML元素：

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

但是没有带 id 的HTML元素。

在输入标记中，必须设置HTML元素的 id 属性，而不是名称。

替换此行：

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

此行：

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

不调用Cat函数

1 个答案: