Javascript onClick（）函數不起作用

-3

我將添加一個聯繫人列表，並將它們放入一個基於第一個字符lname的div中。如果div不存在，它將被動態創建。我想在點擊名稱時顯示聯繫信息。在下面的實現中，showMe()函數無法顯示聯繫人信息。Javascript onClick（）函數不起作用

<html> 
<head> 

<style> 
.holder{ 
    background-color:yellow; 
    margin-top:10px; 
    width: 300px; 
} 

.holder span{ 
    background-color: Green; 
    height:20px; 
    color:white; 
    } 

</style> 



<script> 

var contacts =[]; 

function getInfo() { 
    var firstName = prompt("Enter first name"); 
    var lastName = prompt("Enter last name"); 
    var emailId = prompt("Enter Email ID"); 
    var phoneNo = prompt("Enter Phone number"); 

    var person ={ 
     fname : firstName, 
     lname : lastName, 
     email : emailId, 
     phone : phoneNo 
    }; 
    contacts.push(person); 

    var currPerson = contacts[contacts.length-1]; //take the last pushed object from the array 

    var lastNameFirstChar = currPerson.lname.charAt(0).toUpperCase(); 

    if(!document.getElementById(lastNameFirstChar + "_holder")){  
    document.getElementById("mydiv").innerHTML += "<div id='"+lastNameFirstChar+"_holder' class='holder'><span>"+lastNameFirstChar+"</span></br></div>"; 

    } 
    //document.getElementById(lastNameFirstChar + "_holder").innerHTML += currPerson.fname+" "+currPerson.lname + "<br/>"; 


    document.getElementById(lastNameFirstChar + "_holder").innerHTML += "<span onclick='showMe(" + currPerson.id + ")'>" + currPerson.fname + " " + currPerson.lname + "</span><br/>"; 


} 


function showMe(id) { 
    alert(id); 
    var person = contacts[id]; /* currently corresponds to array index, could be a property lookup with underscore or whatever */ 
    var contactInfo = person.fname+" "+person.lname+"</br> "+person.email+"</br>"+person.phone; 

    target.innerHTML = "<div>" + contactInfo + "</div></br>"; 

} 





</script> 

</head> 

<body> 
<button onclick="getInfo()">Get Person Info</button> 
<p>----------------------------</p> 
<div id="mydiv"> 

</div> 
</body> 
</html>

來源

2016-03-05 Droidr

@ScottMarcus定義什麼id該行調用'文件前加入這一行。 getElementById（lastNameFirstChar +「_holder」）。innerHTML + =「」+ currPerson.fname +「」+ currPerson.lname +「
」;' – Droidr

這是r最後不是解決你的問題的最好方法。而不是內聯的HTML事件處理程序，您應該使用element.addEventListener。而不是使用JavaScript來編寫新的HTML元素並將它們連接起來，您應該通過document.createElement創建元素，或者預先創建元素，但不顯示。然後，JavaScript只需將其連接到事件處理程序（再次使用addEventListener）。 –

你的人沒有'id'屬性，'showMe（）'中的'target'是'undefined' – Andreas

當你調用SHOWME（）函數，你應該通過currPerson.id 發送人的ID，但是當你定義的變種人，你沒有給它的id屬性。你有這樣的

var person = { 
      fname: firstName, 
      lname: lastName, 
      email: emailId, 
      phone: phoneNo 
     };

使它像這樣

var person = { 
      id: contacts.length,// note this extra parameter 
      fname: firstName, 
      lname: lastName, 
      email: emailId, 
      phone: phoneNo 
     };

現在，當你調用

"<span onclick='showMe(" + currPerson.id + ")'>"

currentPerson.id不會是未定義的了。

其次，當你調用這條線

target.innerHTML = "<div>" + contactInfo + "</div></br>";

你還沒有定義的變量「目標」。

上述行

var target= document.getElementById("mydiv")

其中「myDiv」是的，你的HTML標記

<div id="mydiv">

來源

2016-03-05 17:35:45 Mansoor

它在這裏工作[鏈接]（https://gist.github.com/anonymous/67d2bdd1264cf09198a2）在這個div不是動態創建的。我想我需要徹底改變我的方法。 – Droidr

@Droidr在這種情況下，只需添加

剛下

並刪除答案 VAR的目標=的document.getElementById（「mydiv」）這一行事情會工作。我也會更新答案 – Mansoor

仍然無效。因爲參數ID是未定義的。 – Droidr

<script> 

     var contacts = []; 

     function getInfo() 
     { 
      var firstName = prompt("Enter first name"); 
      var lastName = prompt("Enter last name"); 
      var emailId = prompt("Enter Email ID"); 
      var phoneNo = prompt("Enter Phone number"); 

      var person = { 
       fname: firstName, 
       lname: lastName, 
       email: emailId, 
       phone: phoneNo 
      }; 
      contacts.push(person); 

      var currPerson = contacts[contacts.length - 1]; //take the last pushed object from the array 
      var id = contacts.length - 1; 
      var lastNameFirstChar = currPerson.lname.charAt(0).toUpperCase(); 

      if (!document.getElementById(lastNameFirstChar + "_holder")) 
      { 
       document.getElementById("mydiv").innerHTML += "<div id='" + lastNameFirstChar + "_holder' class='holder'><span>" + lastNameFirstChar + "</span></br></div>"; 

      } 
      //document.getElementById(lastNameFirstChar + "_holder").innerHML += currPerson.fname+" "+currPerson.lname + "<br/>"; 


      document.getElementById(lastNameFirstChar + "_holder").innerHTML += "<span onclick='showMe(" + id + ")'>" + currPerson.fname + " " + currPerson.lname + "</span><br/>"; 


     } 


     function showMe(id) 
     { 
      //alert(id); 
      var person = contacts[id]; /* currently corresponds to array index, could be a property lookup with underscore or whatever */ 
      var contactInfo = person.fname + " " + person.lname + "</br> " + person.email + "</br>" + person.phone; 

      mydiv.innerHTML = "<div>" + contactInfo + "</div></br>"; 

     } 

    </script>

來源

2016-03-05 17:46:37

它的工作原理。但它使現有的聯繫人列表從頁面消失 – Droidr

我不明白** id **來自哪裏。你可以解釋嗎？ – Droidr

var currPerson = contacts [contacts.length - 1];這裏我們使用contacts.length-1創建一個新的對象，它實際上指向object.same的索引，我用它通過id訪問對象。你需要一個索引，所以我把它存儲到一個變量，並將其傳遞給函數。 –

Javascript onClick（）函數不起作用

回答

相關問題