J'ai l'impression de suivre guide après guide et je ne semble pas obtenir les mêmes résultats, ce qui est assez frustrant...

C'est mon 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'; 
        }
    };


})();

Et voici mon 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>

Je suppose que je ne comprends pas complètement comment tout cela fonctionne ?? Je veux dire que je crée les objets de chaque bouton mon javascript, que j'essaie de les rendre visibles ou masqués, pas un script difficile si vous me demandez... Je veux même que cela change la valeur du bouton sur lequel je clique ! ! Toute aide est grandement appréciée, en ce qui concerne la documentation, je ne vois pas où je me trompe, mon javascript ne trouve-t-il pas ces boutons ?? Aussi, lorsque je clique sur le bouton, cela ne fait RIEN !! :D ne change pas la valeur pour changer le texte du bouton OU change les autres boutons en visible ou caché, woot woot !! Je ne comprends pas très bien, est-ce qu'il me manque un plugin, ou... quoi ???

0
Devin B 17 mars 2019 à 09:51

2 réponses

Meilleure réponse

Tu as eu des erreurs dans ton code. Voir l'extrait qui fonctionne et a été corrigé ! Suivre la //[*Fix*] : ... commentaires pour les changements qui ont été faits. Vous pouvez exécuter l'extrait de code ici lui-même et vérifier :).

Donc, le principal apprentissage ici est que pour lier un écouteur d'événement, vous devez attribuer le nom ! pas la fonction 'appelée'

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

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

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

Vous devez également affecter séparément un élément « sélectionné » à une variable. De préférence de manière efficace dans des périmètres plus globaux.

// 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>
1
Dehan 17 mars 2019 à 07:24

Le problème principal est que vous ne passez pas une fonction en tant qu'écouteur de clic :

addEventListener("click", menuBar())

Ce code exécutera menuBar juste là, pas lorsque l'événement se produira. Cet argument doit être une fonction, alors faites :

addEventListener("click", menuBar)

Deuxièmement, vous ajoutez un écouteur d'événement en même temps que vous souhaitez affecter l'élément à une variable. Mais ça ne marche pas :

var openClose = document.getElementById('buttMain').addEventListener("click", ...

Vous avez maintenant affecté la valeur de retour de addEventListener à votre variable ! C'est undefined ; pas votre élément buttMain. Alors divisez cela en:

var openClose = document.getElementById('buttMain');
openClose.addEventListener("click", menuBar);

Vous faites également if (openClose.value == 'Close') après vous avez défini cette valeur dans le premier bloc if, vous aurez donc des cas où les deux blocs if sont exécutés. Utilisez simplement un else :

if (openClose.value == 'Open') {
    // ...
} else {
    // ...
}

Remarque : ne liez pas les fonctions avec this lorsque cela n'est pas pertinent. Dans le premier cas où vous faites cela, this est undefined, donc c'est inutile. La valeur par défaut serait plus utile, c'est-à-dire que votre fonction sera appelée avec this défini sur l'élément qui a déclenché l'événement.

Enfin, il peut en effet être frustrant d'avoir un script qui semble correct, mais qui ne se comporte toujours pas comme prévu. Dans ce cas, il y a la console pour vous aider : essayez de l'utiliser au maximum. Utilisez des points d'arrêt, inspectez des variables, etc. Dans ce cas, cela aurait pu vous aider à repérer que menuBar s'exécutait trop tôt.

2
trincot 17 mars 2019 à 07:32