如何在 html 中为 Javascript 添加 onclick 事件 - 非程序员

Question

This is my first post and I'm asking for help.这是我的第一篇文章，我正在寻求帮助。 I am not a programmer of any kind but keen to understand programming and have set up a Codepen page as an example.我不是任何类型的程序员，但热衷于理解编程并设置了一个Codepen 页面作为示例。 I am trying to share with some people who have asked can the page allow mouse clicks to work?我正在尝试与一些询问该页面是否允许鼠标点击工作的人分享？

What I'm trying to get is to have this working without a keyboard click event, ie onkeydown= or onkeyup= , which is what happens now but work with a mouse click which will allow this to work from a mobile phone browser?我想要得到的是在没有键盘点击事件的情况下使它工作，即onkeydown=或onkeyup= ，这是现在发生的事情，但是通过鼠标点击工作，这将允许它在手机浏览器中工作？

If someone can write/show the code I need, I would be very grateful.如果有人可以编写/显示我需要的代码，我将不胜感激。 I see that the HTML needs to define the onclick event and then do two things, the first is speakPrevious and the second getNewRandomColor .我看到 HTML 需要定义onclick事件，然后做两件事，第一件事是speakPrevious ，第二件事是getNewRandomColor 。 I would think that JavaScript will need to define the onclick element?我认为 JavaScript 需要定义onclick元素？ But I am not sure...但我不确定...

  `HTML`
  <body onkeydown="speakPrevious()">
  <body onkeyup="getNewRandomColor()">
  

  `JS`
  speakPrevious();
  function speakPrevious() {
     var synth = window.speechSynthesis;
     var utterThis = new SpeechSynthesisUtterance(window.value);
     synth.speak(utterThis);
  }

    getNewRandomColor();
    function getNewRandomColor() {
    var myArray = ['Red','Green', 'Blue',  'Yellow', ];
    var rand = myArray[Math.floor(Math.random() * myArray.length)];     

    document.getElementsByTagName("body")[0].style.backgroundColor = rand;
    var oldRand = rand;
    window.value = oldRand;
   }

Answer 1

you can allow users to interact with the web page by either using their keyboard or by clicking on the page if you use an event listener.如果您使用事件侦听器，您可以允许用户使用键盘或通过单击页面与 web 页面进行交互。 In your javascript you can add code (like below) which will trigger the function code whenever the html body element is clicked.在您的 javascript 中，您可以添加代码（如下所示），只要单击 html 主体元素，该代码就会触发 function 代码。 This will add functionality to allow users to click on the page.这将添加允许用户单击页面的功能。

const page = document.querySelector("body");
    page.addEventListener("click", function () {
        speakPrevious();
        getNewRandomColor();
    });

Additionally you may find it easier to combine your body tag events into one body tag with both events.此外，您可能会发现将 body 标签事件合并到一个包含两个事件的 body 标签中会更容易。

<body onkeydown="speakPrevious()" onkeyup="getNewRandomColor()">

This will allow the user to either click on the page to trigger the functions or to use a keyboard event.这将允许用户单击页面以触发功能或使用键盘事件。

My final document code looked like this我的最终文档代码如下所示

<html>
<body onkeydown="speakPrevious()" onkeyup="getNewRandomColor()">
    <p>The algorithm will select colors at random from RGBY and you may see the same color several times in a row. This
        is expected behavior and NOT a fault.<br>Click inside the color and press any keyboard key to move to the next
        color.</p>
</body>
<script>
    const page = document.querySelector("body");
    page.addEventListener("click", function () {
        speakPrevious();
        getNewRandomColor();
    });

    function speakPrevious() {
        var synth = window.speechSynthesis;
        var utterThis = new SpeechSynthesisUtterance(window.value);
        synth.speak(utterThis);
    }

    function getNewRandomColor() {
        var myArray = ['Red', 'Green', 'Blue', 'Yellow', ];
        var rand = myArray[Math.floor(Math.random() * myArray.length)];

        document.getElementsByTagName("body")[0].style.backgroundColor = rand;
        var oldRand = rand;
        window.value = oldRand;
    }
</script>
</html>

如何在 html 中为 Javascript 添加 onclick 事件 - 非程序员

问题描述

1 个解决方案

解决方案1
0 2020-08-29 12:20:23

如何在 html 中为 Javascript 添加 onclick 事件 - 非程序员

问题描述

1 个解决方案

解决方案1 0 2020-08-29 12:20:23

解决方案1
0 2020-08-29 12:20:23