Question

好像我遵循一个接一个地指导，但似乎没有得到相同的结果，这真令人沮丧...

这是我的index.js

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in cordova-simulate or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        var parentElement = document.getElementById('deviceready');
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');
        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');




    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };

    var openClose = document.getElementById('buttMain').addEventListener("click", menuBar());
    function menuBar() {
        var buttF, buttE, buttX;
        buttF = document.getElementById('ButtF')
        buttX = document.getElementById('ButtX')
        buttE = document.getElementById('ButtE')

        if (openClose.value == 'Open') {
            openClose.value = 'Close';
            buttF.style.visibility = 'visible';
            buttX.style.visibility = 'visible'; 
            buttE.style.visibility = 'visible'; 
        }
        if (openClose.value == 'Close') {
            openClose.value = 'Open';
            buttF.style.visibility = 'hidden';
            buttX.style.visibility = 'hidden';
            buttE.style.visibility = 'hidden'; 
        }
    };


})();

这是我的index.html

<!DOCTYPE html>
<html>
    <head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>ADHP</title>
    </head>
    <body>
        <input type="button" id="buttMain" value="Open" class="buttonMain">
        <button id="ButtF" class="buttons">Flower</button>
        <button id="ButtX" class="buttons">Extracts</button>
        <button id="ButtE" class="buttons">Edibles</button>
        <div id="mainPage"class="menuPage">
            <h2 id="Menupage" class="titles">Flower Menu Feed!</h2>
        </div>
        <div class="app">
            <h1 class="colorchange">American Harvest</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Open Menu</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
    </body>
</html>

我想我还没有完全掌握这一切的运作方式？我的意思是我用JavaScript创建每个按钮的对象，而不是尝试将它们设置为可见或隐藏，如果您问我，这不是一个艰难的脚本……我什至希望它更改我单击的按钮的值！！非常感谢任何帮助，就文档而言，我看不到我的混乱之处，是我的javascript没有找到这些按钮吗？另外，当我单击按钮时，它什么都没有！：D不会更改值来更改按钮文本或将其他按钮更改为可见或隐藏，请加油！我只是不太了解，我是否缺少插件，或者……什么？

Answer 1

主要问题是您没有传递作为点击侦听器的功能：

.libPaths()

此代码将在此处执行c:\Users\%USERNAME%\AppData\Local\RStudio-Desktop\，而不是在事件发生时执行。该参数必须是一个函数，所以：

addEventListener("click", menuBar())

其次，您实际上要在将元素分配给变量的同时添加事件侦听器。但这不起作用：

menuBar

现在，您实际上将addEventListener("click", menuBar)的返回值分配给了变量！那就是var openClose = document.getElementById('buttMain').addEventListener("click", ...;不是您的addEventListener元素。因此将其拆分为：

undefined

您还要在buttMain之后执行，您已经在第一个var openClose = document.getElementById('buttMain'); openClose.addEventListener("click", menuBar);块中设置了该值，所以您会遇到两个if (openClose.value == 'Close')块都位于被执行。只需使用if：

if

请注意：不相关的函数不要与else绑定。在您执行此操作的第一个实例中，if (openClose.value == 'Open') { // ... } else { // ... }是this，因此没有用。默认值会更有用，即在将this设置为触发事件的元素的情况下调用您的函数。

最后，拥有看似正确的脚本，但仍然无法达到预期的效果确实令人沮丧。在这种情况下，可以使用控制台进行帮助：尝试充分使用它。使用断点，检查变量，等等。在这种情况下，它可以帮助您发现undefined执行得太早。

Answer 2

您的代码中有一些错误。查看有效且具有已修复！跟着 //[*Fix*] : ... 注释已完成的更改。您可以在此处运行代码段并检查：）。

因此，这里的主要学习内容是，绑定事件监听器必须指定名称！不是“被叫”功能

function doWhenClicked(e){
     console.log('somebody clicked');
}

//This is wrong
someElement.addEventListener('click', doWhenClicked());

//This is correct
someElement.addEventListener('click', doWhenClicked);

此外，您还应该为变量分别分配一个“选定”元素。最好以更有效的方式在更多全球范围内使用。

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in cordova-simulate or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(function() {
  "use strict";

  document.addEventListener('deviceready', onDeviceReady.bind(this), false);

  function onDeviceReady() {
    // Handle the Cordova pause and resume events
    document.addEventListener('pause', onPause.bind(this), false);
    document.addEventListener('resume', onResume.bind(this), false);

    // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
    var parentElement = document.getElementById('deviceready');
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');
    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');
  };

  function onPause() {
    // TODO: This application has been suspended. Save application state here.
  };

  function onResume() {
    // TODO: This application has been reactivated. Restore application state here.
  };
  
  //[*Fix*] :  Separated selector and event listener addition to two separate statements
  //[*Fix*] :  Added reference to 'menuBar' without calling it ( menuBar() )
  var openClose = document.getElementById('buttMain');
  openClose.addEventListener("click", menuBar);
  
    //[*Fix*] :  Hide buttons by default
  var buttF, buttE, buttX;
  buttF = document.getElementById('ButtF')
  buttX = document.getElementById('ButtX')
  buttE = document.getElementById('ButtE')
  buttF.style.visibility = 'hidden';
  buttX.style.visibility = 'hidden';
  buttE.style.visibility = 'hidden';

  function menuBar() {
    if (openClose.value === 'Open') {
      openClose.value = 'Close';
      buttF.style.visibility = 'visible';
      buttX.style.visibility = 'visible';
      buttE.style.visibility = 'visible';
        //[*Fix*] :  Fix condition here with an else if
    } else if (openClose.value === 'Close') {
      openClose.value = 'Open';
      buttF.style.visibility = 'hidden';
      buttX.style.visibility = 'hidden';
      buttE.style.visibility = 'hidden';
    }
  };


})();

<!DOCTYPE html>
<html>

<head>
  <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <title>ADHP</title>
</head>

<body>
  <input type="button" id="buttMain" value="Open" class="buttonMain">
  <button id="ButtF" class="buttons">Flower</button>
  <button id="ButtX" class="buttons">Extracts</button>
  <button id="ButtE" class="buttons">Edibles</button>
  <div id="mainPage" class="menuPage">
    <h2 id="Menupage" class="titles">Flower Menu Feed!</h2>
  </div>
  <div class="app">
    <h1 class="colorchange">American Harvest</h1>
    <div id="deviceready" class="blink">
      <p class="event listening">Connecting to Device</p>
      <p class="event received">Open Menu</p>
    </div>
  </div>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="scripts/platformOverrides.js"></script>
  <script type="text/javascript" src="scripts/index.js"></script>
</body>

</html>

Javascript | addOnEventListener无法正常工作吗？

2 个答案: