Функция мыши на динамически созданных элементах списка

Question

Я работаю над простой формой ввода пользователя, в которой пользователи вводят свой ID, имя и фамилию в 3 отдельных окна ввода. Моя основная цель - получить данные, вводимые пользователем, добавить их к объекту «person» и отобразить в неупорядоченный список. Я так много разобрался.

Что я пытаюсь сделать сейчас, так или иначе стиль содержимого элемента списка, который был динамически создан, с использованием функции mouseover. Я пробовал простые изменения цвета, но я супер ржавый с javascript и должен делать это без jQuery. Любая помощь приветствуется. Просто нужно толчок в правильном направлении, не может заставить наведение мыши работать по какой-либо причине.

Вот что у меня до сих пор:

<form> 
ID Number:<br> 
<input type="text" id="idNumber"> 
<br> 
First name:<br> 
<input type="text" name="firstName" id="fName"> 
<br> 
Last name:<br> 
<input type="text" name="lastName" id="lName"> 
</form> 
<br> 
<button type ="submit" onclick="myFunction(list)">Submit</button> 
<div id = "container"> 
<ul id="list"></ul> 
</div> 


<script> 
function myFunction(list){ 
var text = ""; 
var person = {idNo:"", firstName:"", lastName:""}; 
var inputs = document.querySelectorAll("input[type=text]"); 
for (var i = 0; i < inputs.length; i++) { 
    idNo = inputs[0].value; 
    firstName = inputs[1].value; 
    lastName = inputs[2].value; 

    text = " "+idNo+" "+firstName+" "+lastName; 
} 
var li = document.createElement("li"); 
li.addEventListener("mouseover", mouseOver, false); 
li.addEventListener("click", mouseClick, false); 
var node = document.createTextNode(text); 
li.appendChild(node); 
document.getElementById("list").appendChild(li); 
} 

function mouseOver(){ 
li.style.backgroundColor="red"; 
} 
</script> 

Answer 1

li не определяется в функции mouseover использование this вместо ->this.style.backgroundColor = "red";

переменные определены в области видимости функции, следовательно, var li доступен в myFunction но не в mouseover функция.

Попробуйте sinppet:

function myFunction(list) { 
 
    var text = ""; 
 
    var person = { 
 
    idNo: "", 
 
    firstName: "", 
 
    lastName: "" 
 
    }; 
 
    var inputs = document.querySelectorAll("input[type=text]"); 
 
    for (var i = 0; i < inputs.length; i++) { 
 
    idNo = inputs[0].value; 
 
    firstName = inputs[1].value; 
 
    lastName = inputs[2].value; 
 

 
    text = " " + idNo + " " + firstName + " " + lastName; 
 
    } 
 
    var li = document.createElement("li"); 
 
    li.addEventListener("mouseover", mouseOver, false); 
 
    //li.addEventListener("click", mouseClick, false); 
 
    var node = document.createTextNode(text); 
 
    li.appendChild(node); 
 
    document.getElementById("list").appendChild(li); 
 
} 
 

 
function mouseOver() { 
 
    this.style.backgroundColor = "red"; 
 
}

<form> 
 
    ID Number: 
 
    <br> 
 
    <input type="text" id="idNumber"> 
 
    <br>First name: 
 
    <br> 
 
    <input type="text" name="firstName" id="fName"> 
 
    <br>Last name: 
 
    <br> 
 
    <input type="text" name="lastName" id="lName"> 
 
</form> 
 
<br> 
 
<button type="submit" onclick="myFunction(list)">Submit</button> 
 
<div id="container"> 
 
    <ul id="list"></ul> 
 
</div>

Answer 2

Зачем использовать JS, когда вы можете использовать CSS?

JavaScript:

var li = document.createElement("li"); 

li.classList.add('my-li-class') 

CSS:

.my-li-class:hover { 
    background-color: red; 
} 

Во всяком случае, если вы хотите знать, почему ваш JS не работает это, так как переменная Li определена вне функции MouseOver сферы, сделать это вместо:

function mouseOver() { 
    this.style.backgroundColor = 'red' 
} 

Или это событие (может не работать, если литий имеет детей):

function mouseOver(evt) { 
    evt.target.backgroundColor = 'red' 
}