Ничего не происходит при нажатии кнопки

#javascript #android #jquery #html #cordova

#javascript #Android #jquery #HTML #кордова

Вопрос:

Я довольно новичок в Cordova, и я пытаюсь создать быстрое приложение, которое использует плагин device-motion (акселерометр). Я создал кнопку в index.html файл, который должен заставить X, Y, Z всплывать в окне предупреждения, но кнопка, похоже, ничего не делает.

Материал Javascript:

 bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
    document.getElementById("btnClick").addEventListener("click", clickbtn);
},

function clickbtn(){    
      alert('Acceleration X: '   acceleration.x   'n'  
      'Acceleration Y: '   acceleration.y   'n'  
      'Acceleration Z: '   acceleration.z   'n'  
      'Timestamp: '        acceleration.timestamp   'n');
}
  

HTML:

 <div class="app">
        <h1>Apache Cordova</h1>
        <button class="ui-btn" id="btnClick" >Get location</button> <br/>
</div>
  

Я что-то делаю не так? (В качестве альтернативы, есть ли способ увидеть, что происходит при нажатии кнопки?)

Комментарии:

1. document.getElementById("btnClick") вы уверены, что DOM готов к этому моменту?

2. пожалуйста, запишите прослушиватель событий и его функцию в receivedEvent:

Ответ №1:

Попробуйте это. Ваша кнопка начнет работать, как только phonegap будет полностью загружен. Код Javascript:

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

function onDeviceReady(){
  document.getElementById("btnClick").onclick = function(){
     alert('Acceleration X: '   acceleration.x   'n'  
      'Acceleration Y: '   acceleration.y   'n'  
      'Acceleration Z: '   acceleration.z   'n'  
      'Timestamp: '        acceleration.timestamp   'n');
 }
}
  

и ваш HTML останется прежним.

 <div class="app">
        <h1>Apache Cordova</h1>
        <button class="ui-btn" id="btnClick" >Get location</button> <br/>
</div>
  

Ответ №2:

Взгляните на этот пример: https://cordova.apache.org/docs/en/4.0.0/cordova/events/events.deviceready.html

Ваше тело должно вызвать onload-функцию:

 <body onload="onLoad()">
  

Функция onload должна вызывать deviceready-функцию:

 function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
  

И вы должны создать deviceready-обратный вызов с помощью прослушивателя кнопок:

 function onDeviceReady() {
    $("#btnClick").click(function(){
       //make some funny things
       alert("clicked");
    });
}