ข้อผิดพลาด Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติ 'onclick' เป็น null

ฉันมีข้อผิดพลาดใน Facebook Javascript "Uncaught TypeError: ไม่สามารถตั้งค่าคุณสมบัติ 'onclick' ของ null " บรรทัด 187 และบรรทัด 187 คือ:

" button.onclick = function() {"

รหัสทั้งหมดคือ:

<script type="text/javascript">
window.fbAsyncInit = function() {
  FB.init({ appId: <?php echo json_encode($this->getApiKey()) ?>, 
        status: true, 
        cookie: true,
        xfbml: true,
        oauth: true});
 FB.Canvas.setSize({ width: 640, height:1500 });
 //FB.Canvas.setAutoResize();
 function updateButton(response) {
    var button = document.getElementById('fb-auth');

    if (response.authResponse == 'null') {
      //user is already logged in and connected
      var userInfo = document.getElementById('user-info');
     FB.api('/me', function(response) {


      });

      button.onclick = function() {
        FB.logout(function(response) {
          var userInfo = document.getElementById('user-info');
          userInfo.innerHTML="";
    });
      };
    } else {
      //user is not connected to your app or logged out
      //button.innerHTML = 'Login';
      button.onclick = function() {
        FB.login(function(response) {
if(response.status=='connected') setLocation('<?php echo $this->getConnectUrl() ?>');
      if (response.authResponse) {
            FB.api('/me', function(response) {
          var userInfo = document.getElementById('user-info');


        });  

          } else {
            //user cancelled login or did not grant authorization
          }
         }, {scope:'email, user_birthday'});    
      }
    }
  }

  // run once with current status and whenever the status changes
  FB.getLoginStatus(updateButton);
  //FB.Event.subscribe('auth.statusChange', updateButton);  
};

(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol 
    + '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
}());

</script>

หากต้องการข้อมูลเพิ่มเติม เพียงบอกฉันว่าฉันขอขอบคุณสำหรับความช่วยเหลือ ขอบคุณ!.


person Mark Anthon    schedule 21.05.2013    source แหล่งที่มา


คำตอบ (2)


การดูโค้ดของคุณโดยสรุปแสดงให้เห็นว่าไม่มีปุ่มนี้อยู่เมื่อคุณพยายามเข้าถึง:

function updateButton(response) {
    var button = document.getElementById('fb-auth');
    //there is no element with id fb-auth
    console.log("button is now:",button);

โปรดใส่ console.log ลงไปเหมือนตัวอย่างด้านบนหลังจากที่คุณได้ตั้งค่าตัวแปรปุ่มและก่อนที่จะลองใช้มัน จากนั้นอัปเดตคำถามของคุณว่ามันผิดพลาดตรงไหน

ใช้ Chrome หรือ Firefox กับปลั๊กอิน firebug เพื่อดู console.logs ที่เหมาะสม และกด F12 เพื่อเปิดเครื่องมือ dev (เปิดแท็บคอนโซลตามค่าเริ่มต้น)

[อัปเดต]

ฉันได้ลบโค้ดที่อ้างอิงถึงปุ่ม fb-auth แล้ว ดังนั้นหากโค้ดนั้นเก่าและไม่ได้ใช้ สิ่งต่อไปนี้น่าจะใช้ได้:

<script type="text/javascript">
window.fbAsyncInit = function() {
  FB.init({ appId: <?php echo json_encode($this->getApiKey()) ?>, 
        status: true, 
        cookie: true,
        xfbml: true,
        oauth: true});
 FB.Canvas.setSize({ width: 640, height:1500 });
 function updateButton(response) {
    if (response.authResponse == 'null') {
     //user is already logged in and connected
     var userInfo = document.getElementById('user-info');
     FB.api('/me', function(response) {
     });
    } else {
  // run once with current status and whenever the status changes
  FB.getLoginStatus(updateButton);
  //FB.Event.subscribe('auth.statusChange', updateButton);  
};

(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol 
    + '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
}());
</script>
person HMR    schedule 21.05.2013
comment
มันบอกว่า button is now: null . - person Mark Anthon; 22.05.2013
comment
คุณเรียกใช้ฟังก์ชัน updateButton เร็วเกินไปหรือไม่? ดูเหมือนว่าไม่มีองค์ประกอบที่มี id fb-auth ดังนั้นคุณจึงไม่สามารถเพิ่มเหตุการณ์ onclick ลงไปได้ รหัสของคุณไม่แสดงเมื่อมีการเรียก fbAsyncInit แต่ฉันเดาว่ามันจะถูกเรียกเมื่อเนื้อหายังไม่โหลดหรือคุณคาดหวังว่าจะมีเนื้อหาที่ไม่มีอยู่ที่นั่น - person HMR; 22.05.2013
comment
ใช่แล้ว ไม่มีการเรียกไปยัง fb-auth ฉันเพิ่งเปลี่ยนการโทรเป็น.. ‹a href=# title=Facebook Connect rel=facebook-connect id=fb-auth›‹img style=width:65px; src=‹?php echo $this-›getSkinUrl('images/flogin.jpg') ?› id=facebook alt=facebook login /›‹/a› แต่ก็ยังเหมือนเดิม.. การเรียกนั้นเป็น html ที่ไม่แสดง บนเว็บฉันหมายถึงไม่มีใครไปที่นั่น .. - person Mark Anthon; 22.05.2013
comment
รหัส html ที่คุณโพสต์; นั่นเป็นส่วนหนึ่งของเพจของคุณหรือไม่? หากเป็นเช่นนั้น document.getElementById(fb-auth) ไม่ควรส่งคืน null เว้นแต่ว่าโค้ดและ href ของคุณจะอยู่ในเฟรมที่แตกต่างกัน - person HMR; 22.05.2013
comment
ใช่ มันเป็นส่วนหนึ่งของเพจของฉัน แต่อย่างที่ฉันบอกว่าเว็บไม่เคยถูกใช้คือข้อมูลเข้าสู่ระบบเก่า ฉันจะแก้ไขสิ่งนั้นได้อย่างไร?. รหัสที่ปิดข้อผิดพลาดอยู่บน Prototype.js และรหัส ‹a href=# title=Facebook Connect rel=facebook-connect id=fb-auth›... อยู่ในการเข้าสู่ระบบแบบเก่า - person Mark Anthon; 22.05.2013
comment
ถ้าฉันใส่รหัสนั้นลงในเว็บใด ๆ และไปที่นั่นข้อผิดพลาดจะหายไป แต่ถ้าฉันเปลี่ยนหน้าเว็บที่ไม่เรียกรหัสนั้นก็จะทำให้เกิดข้อผิดพลาดอีกครั้ง จะทำให้ไม่เรียกรหัสนั้นทุกช่วงเวลาได้อย่างไร ในทุกเว็บ? หรือวิธีทำให้ข้อผิดพลาดนั้นหายไปโดยไม่ต้องใส่โค้ดลงทุกเว็บ - person Mark Anthon; 22.05.2013
comment
รหัสที่ปิดข้อผิดพลาดอยู่บน Prototype.js ตอนนี้คุณมีข้อผิดพลาดอื่นแล้วหรือยัง var userInfo = document.getElementById('ข้อมูลผู้ใช้'); มาจากรหัสของคุณใช่ไหม ไม่ได้มาจากต้นแบบเหรอ? - person HMR; 22.05.2013
comment
ไม่ ฉันอธิบายผิด ข้อผิดพลาดยังคงเหมือนเดิม แต่อย่างที่คุณบอกว่ามีการเรียก แต่ฉันเดาว่ามันจะถูกเรียกเมื่อเนื้อหายังไม่โหลด ถ้าโหลดปุ่มแล้ว ‹a href=# title=Facebook Connect rel=facebook -เชื่อมต่อ id=fb-auth›‹img style=width:65px; src=‹?php echo $this-›getSkinUrl('images/flogin.jpg') ?› id=facebook alt=facebook login /›‹/a› ข้อผิดพลาดหายไป ดังนั้นจะแก้ไขอย่างไรโดยไม่ต้องกดปุ่มบน หน้าเว็บ? - person Mark Anthon; 22.05.2013
comment
@ MarkAnthon ฉันเข้าใจแล้วฉันได้อัปเดตคำตอบและลบรหัสที่อ้างถึงรหัสเก่าที่ไม่ได้ใช้อีกต่อไป คุณสามารถลองดูว่ามันใช้งานได้หรือไม่ - person HMR; 22.05.2013
comment
ให้ข้อผิดพลาดนี้: ‹!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Uncaught SyntaxError: การสิ้นสุดอินพุตที่ไม่คาดคิด ‹html xmlns=w3.org/1999/xhtml xml:lang=es lang=es› - person Mark Anthon; 23.05.2013
comment
@MarkAnthon คุณรู้วิธีใช้เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์หรือไม่? คุณสามารถเปิดด้วย Chrome แล้วกด F12 จากนั้นตรวจสอบคอนโซลเพื่อดูว่าข้อผิดพลาดมาจากไหน บรรทัดไหนและถ้ามันเกิดจาก Javascript เลย? - person HMR; 23.05.2013

อาจเป็นเพราะ JavaScript ของคุณไม่ได้อยู่ที่ด้านล่างของหน้า และเมื่อทำงาน แผนผัง DOM ก็ยังไม่ได้สร้าง ลองวางโค้ดของคุณในส่วนอื่นของหน้า html หลังจากสร้างองค์ประกอบแล้ว

person Frank Castle    schedule 27.09.2014