remplacer dans ce code les onclick par des addlistener

[lionel1667]

var films = [bonjour voila mon problème
{ name: "Deadpool", years: 2016, authors : "Tim Miller" },
{ name: "Spiderman", years: 2002, authors : "Sam Raimi" },
{ name: "Scream", years: 1996, authors : "Wes Craven" },
{ name: "It: chapter 1", years: 2019, authors : "Andy Muschietti" }
];

function Search() {
var input, filter, table, tr, td, i, txtValue;
// entré de recherche
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
//table
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");

for (i = 0; i < tr.length; i++) {
td = tr.getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
// Compare recherche et les champs existant
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr.style.display = "";
} else {
tr.style.display = "none";
// cache si l'élement n'existe pas
}
}
}
}

// alphabetic sort
function Alphabeticsort() {
var table, rows, status, i, x, y, NeedaSwitch;
table = document.getElementById("myTable");
work = true;
while (work) {
work = false;
rows = table.rows;
// traverse les colonnes
for (i = 1; i < (rows.length - 1); i++) {
NeedaSwitch = false;
// Récupère caractère X pour X et X+1 pour Y
x = rows.getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
// Compare les colonnes x et y
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
NeedaSwitch = true;
// Si true quitte en demandant un switch sinon aucun switch nécessaire
break;
}
}
// Rentre dans la condition si un switch et nécessaire
if (NeedaSwitch) {
rows.parentNode.insertBefore(rows[i + 1], rows);
work = true;
// work = true oblige la boucle à continuer son travail
}
}
}

// Numeric sort
function numeric_sort() {
var table, rows, status, i, x, y, NeedaSwitch;
table = document.getElementById("myTable");
work = true;
while (work) {
work = false;
rows = table.rows;
// traverse les collones
for (i = 1; i < (rows.length - 1); i++) {
NeedaSwitch = false;
// Récupère caractère X pour X et X+1 pour Y
x = rows.getElementsByTagName("TD")[1];
y = rows[i + 1].getElementsByTagName("TD")[1];
// Compare les colonnes x et y
if (x.innerHTML > y.innerHTML) {
NeedaSwitch = true;
// Si true quitte en demandant un switch sinon aucun switch nécessaire
break;
}
}
// Rentre dans la condition si un switch et nécessaire
if (NeedaSwitch) {
rows.parentNode.insertBefore(rows[i + 1], rows);
work = true;
// work = true oblige la boucle à continuer son travail
}
}
}

// Affiche des élements du tableau ci-dessus
function displayRow(films)
{
for (var i = 0; i < films.length; i++)
document.getElementById("myTable").insertRow(-1).innerHTML =
'<td>' + films['name'] + '</td><td>' + films[i]['years'] + '</td><td>' + films[i]['authors']
+ '</td><td><input type="button" class="myButton" onclick="DeleteRow(' + i + ')" value="Supprimer"></td>';
}








// Surprime l'élement index + 1 (pour ne pas supprimer le titre)
function DeleteRow(index) {
if ( confirm( "Vous allez supprimer un film de la liste" ) ) {
if (index != -1)
index += 1;
document.getElementById("myTable").deleteRow(index);
}
}
//Fonction pour mettre la première lettre en majuscule
const capitalize = (s) => {
if (typeof s !== 'string') return ''
return s.charAt(0).toUpperCase() + s.slice(1)
}
// Rajouter une ligne
function addRow()
{
var error = "";
var result_name = capitalize(document.getElementById('name').value);
var result_author = capitalize(document.getElementById('author').value);
var result_year = document.getElementById('year').value;

if (result_name.length < 2)
error += "- Titre invalide (+ 2 caractères)\n";
if (result_author.length < 5)
error += "- Auteur invalide (+ 5 caractères)\n";
if (result_year < 1900 || result_year > 2019)
error += "- Année invalide (entre 1900 et 2019)\n";
// condition d'insertion
if (error.length < 1) {
document.getElementById("myTable").insertRow(-1).innerHTML
= '<td>' + result_name + '</td><td>' + result_year + '</td><td>' + result_author
+ '</td><td><input type="button" class="myButton" onclick="DeleteRow(-1)" value="Supprimer"></td>';
alert("Film ajouté avec succés !");
} else {
alert("Erreur avec l'insertion\n" + error);
}
}

function SortingHandler(select)
{
if (this.value == "year")
numeric_sort();
else if (this.value == "title")
Alphabeticsort();
}

// Affiche le tableau dès l'execution du scrypt
window.onload = function() {
displayRow(films);
var select = document.getElementById("selector");
var search = document.getElementById("myInput");
var add = document.getElementById("add");
//select.addEventListener('change', numeric_sort);
select.addEventListener('change', SortingHandler);
add.addEventListener("click", addRow);
search.addEventListener("keyup", Search);

[webmaster]

Bonjour

Le copier coller du code a effacé du texte et la mise en forme.