Javascript onClick() не работает

-3

Я буду добавлять список контактов и поместить их в div на основе первого символа lname. Если 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 Эта строка вызывает 'документа. getElementById (lastNameFirstChar + "_holder"). innerHTML + = "" + currPerson.fname + "" + currPerson.lname + "
"; ' – Droidr

Это r не всегда лучший способ решить вашу проблему. Вместо встроенных обработчиков событий HTML вы должны использовать element.addEventListener. И вместо того, чтобы использовать JavaScript для написания новых элементов HTML и подключения их, вы должны просто создать элемент либо с помощью document.createElement, либо с его помощью, но просто не отображаться. Тогда JavaScript должен только подключить его к обработчику событий (снова используя addEventListener). –

В ваших лицах нет свойства 'id', а' target' в 'showMe()' is undefined' – Andreas

При вызове функции ShowMe() вы должны послать идентификатор человека по currPerson.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

Он работает здесь [link] (https://gist.github.com/anonymous/67d2bdd1264cf09198a2) В этом div не создаются динамически. Мне кажется, мне нужно полностью изменить свой подход. – Droidr

@Droidr в этом случае просто добавьте

только под

и удалите эту строку из ответа вара цели = 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 = контакты [контакты.length - 1]; здесь мы создаем новый объект из существующего с помощью contacts.length-1, который фактически указывает на индекс объекта. Так я использовал его ниже для доступа к объекту через id. вам нужен индекс, поэтому я сохранил его в переменной и просто передал его функции. –

Javascript onClick() не работает

ответ

Смежные вопросы