Question

我希望我的按钮运行两个功能。它将运行一个，但不会运行另一个。

我已经尝试了这两种功能，它们都可以工作。当我用一个按钮尝试这两个功能时，它不起作用。

<body>
    <input id="test" type="submit" value = "click me" onclick="deactivateFunc(); typewriter()">
    <script>
        var txt = "I made a typewriter.";
        var add = 0;
        var speed = 50;

        function typewriter() {
            if (add < txt.length)
                document.getElementById("test").innerHTML += txt.charAt(add);
            add++;
            setTimeout(typewriter, speed);
        }
        function deactivateFunc() {
            var btn = document.getElementById("test");
            btn.disabled = true;
            var myTimer = setTimeout(activate, 3000);
        }
        function activate() {
        var btn = document.getElementById("test");
        btn.disabled = false;
        }

    </script>
</body>

这可以正确禁用和启用按钮，但是打字机功能不能使用它。

Answer 1

您的代码同时运行这两个函数，您只是看不到typewritter的输出，因为您试图设置innerHTML元素的input。在Insead中，设置另一个元素（例如段落标记）的innerHTML：

<body>
  <p id="output"></p>
  <input id="test" type="submit" value="click me" onclick="deactivateFunc(); typewriter()">
  <script>
    var txt = "I made a typewriter.";
    var add = 0;
    var speed = 50;

    function typewriter() {
      if (add < txt.length) {
        document.getElementById("output").innerHTML += txt.charAt(add);
        add++;
        setTimeout(typewriter, speed);
      }
    }

    function deactivateFunc() {
      var btn = document.getElementById("test");
      btn.disabled = true;
      var myTimer = setTimeout(activate, 3000);
    }

    function activate() {
      document.getElementById("output").innerHTML = "";
      add = 0;
      var btn = document.getElementById("test");
      btn.disabled = false;
    }
  </script>
</body>

Answer 2

您应该更改按钮的value属性。

document.getElementById("test").value += txt.charAt(add);

注意-出于性能原因，您应该取消setTimeout

Answer 3

由于input标签的innerHTML没有意义，我添加了textarea进行测试，我们可以提供什么帮助？

<body>
    <input id="test" type="submit" value = "click me" onclick="deactivateFunc(); typewriter()">
    <textarea id="test2"></textarea>
    <script>
        var txt = "I made a typewriter.";
        var add = 0;
        var speed = 50;

        function typewriter() {
            if (add < txt.length)
                document.getElementById("test2").innerHTML += txt.charAt(add);
            add++;
            setTimeout(typewriter, speed);
        }
        function deactivateFunc() {
            var btn = document.getElementById("test");
            btn.disabled = true;
            var myTimer = setTimeout(activate, 3000);
        }
        function activate() {
            var btn = document.getElementById("test");
            btn.disabled = false;
        }

    </script>
</body>

Answer 4

尝试创建一个可以同时执行它们的函数

function myFunction(){
    function1();
    function2();
}

按钮onclick未完成功能

4 个答案: