javascript错误返回选择html

Question

如果我从选择菜单中选择电影院，它不会返回数组 programmazione 中存在的电影的标题。

var programmazione = [{
    titolo: 'matrix',
    cinema: ['garibaldi', 'politeama']
  },
  {
    titolo: 'limitless',
    cinema: ['politeama', 'italia']
  },
  {
    titolo: 'forrest gump',
    cinema: ['italia', 'popoazzurra']
  }
];

var nodoSelectCinema;
var nodoMostraFilm;
var nodoListaFilm;

function calcolaListaFilm(cinema) {
  try {
    var listaFilm = [];
    for (var i = 0; i < programmazione.length; i++) {
      var film = programmazione[i];
      var j = 0;
      while ((j < film.cinema.length) && film.cinema[i] != cinema) {
        j++;
      }
      if (j < film.cinema.length) {
        listaFilm.push(film.titolo);
      }
    }
    console.log(listaFilm);
    return listaFilm;
  } catch (e) {
    alert("calcolaListaFilm" + e);
  }
}

function calcolaListaCinema() {
  try {
    var listaCinema = {};
    for (var i = 0; i < programmazione.length; i++) {
      var film = programmazione[i];
      for (var j = 0; j < film.cinema.length; j++) {
        var cinema = film.cinema[j];
        listaCinema[cinema] = true;
      }
    }
    return listaCinema;
  } catch (e) {
    alert("calcolaListaCinema" + e);
  }
}


function visualizzaListaFilm(listaFilm) {
  try {
    while (nodoListaFilm.childNodes.length > 0) {
      nodoListaFilm.removeChild(nodoListaFilm.firstChild);
    }
    for (var i = 0; i < listaFilm.length; i++) {
      var film = listaFilm[i];
      var nodoFilm = document.createElement("li");
      nodoListaFilm.appendChild(nodoFilm);
      var nodoTesto = document.createTextNode(film);
      nodoFilm.appendChild(nodoTesto);
    }
  } catch (e) {
    alert("visualizzaListaFilm" + e);
  }
}

function creaSelect(nodoSelect, opzioni) {
  try {
    for (var opzione in opzioni) {
      var nodoOpzione = document.createElement("option");
      nodoOpzione.value = opzione;
      var nodoTesto = document.createTextNode(opzione);
      nodoOpzione.appendChild(nodoTesto);
      nodoSelect.appendChild(nodoOpzione);
    }
  } catch (e) {
    alert("creaSelect" + e);
  }
}

function gestoreMostraFilm() {
  try {
    var cinema = nodoSelectCinema.value;
    var listaFilm = calcolaListaFilm(cinema);
    visualizzaListaFilm(listaFilm);
  } catch (e) {
    alert("gestoreMostraFilm" + e);
  }
}

function inzializza() {
  try {
    nodoSelectCinema = document.getElementById("selectCinema");
    nodoMostraFilm = document.getElementById("mostraFilm");
    nodoListaFilm = document.getElementById("listaFilm");
    var listaCinema = calcolaListaCinema();
    creaSelect(nodoSelectCinema, listaCinema);
    nodoListaFilm.onclick = gestoreMostraFilm();
  } catch (e) {
    alert("inizializza" + e);
  }
}

window.onload = inzializza;

<select id="selectCinema"></select>
<input type="button" id="mostraFilm" value="Mostra Film">
<br>
<ol id="listaFilm"></ol>

Answer 1

我找到了两个地方，您可以在其中进行更改以修复您的代码。

首先，您没有为按钮分配点击监听器。

nodoListaFilm.onclick = gestoreMostraFilm();

应该是

nodoMostraFilm.addEventListener('click', gestoreMostraFilm);

其次，calcolaListaFilm 函数中的 while 循环指向 i 而不是 j。

while ((j < film.cinema.length) && film.cinema[i] != cinema) {

应该是

while ((j < film.cinema.length) && film.cinema[j] != cinema) {

var programmazione = [{
    titolo: 'matrix',
    cinema: ['garibaldi', 'politeama']
  },
  {
    titolo: 'limitless',
    cinema: ['politeama', 'italia']
  },
  {
    titolo: 'forrest gump',
    cinema: ['italia', 'popoazzurra']
  }
];

var nodoSelectCinema;
var nodoMostraFilm;
var nodoListaFilm;

function calcolaListaFilm(cinema) {
  try {
    var listaFilm = [];
    for (var i = 0; i < programmazione.length; i++) {
      var film = programmazione[i];
      var j = 0;
      while ((j < film.cinema.length) && film.cinema[j] != cinema) {
        j++;
      }
      if (j < film.cinema.length) {
        listaFilm.push(film.titolo);
      }
    }
    console.log(listaFilm);
    return listaFilm;
  } catch (e) {
    alert("calcolaListaFilm" + e);
  }
}

function calcolaListaCinema() {
  try {
    var listaCinema = {};
    for (var i = 0; i < programmazione.length; i++) {
      var film = programmazione[i];
      for (var j = 0; j < film.cinema.length; j++) {
        var cinema = film.cinema[j];
        listaCinema[cinema] = true;
      }
    }
    return listaCinema;
  } catch (e) {
    alert("calcolaListaCinema" + e);
  }
}


function visualizzaListaFilm(listaFilm) {
  try {
    while (nodoListaFilm.childNodes.length > 0) {
      nodoListaFilm.removeChild(nodoListaFilm.firstChild);
    }
    for (var i = 0; i < listaFilm.length; i++) {
      var film = listaFilm[i];
      var nodoFilm = document.createElement("li");
      nodoListaFilm.appendChild(nodoFilm);
      var nodoTesto = document.createTextNode(film);
      nodoFilm.appendChild(nodoTesto);
    }
  } catch (e) {
    alert("visualizzaListaFilm" + e);
  }
}

function creaSelect(nodoSelect, opzioni) {
  try {
    for (var opzione in opzioni) {
      var nodoOpzione = document.createElement("option");
      nodoOpzione.value = opzione;
      var nodoTesto = document.createTextNode(opzione);
      nodoOpzione.appendChild(nodoTesto);
      nodoSelect.appendChild(nodoOpzione);
    }
  } catch (e) {
    alert("creaSelect" + e);
  }
}

function gestoreMostraFilm() {
  try {
    var cinema = nodoSelectCinema.value;
    var listaFilm = calcolaListaFilm(cinema);
    visualizzaListaFilm(listaFilm);
  } catch (e) {
    alert("gestoreMostraFilm" + e);
  }
}

function inzializza() {
  try {
    nodoSelectCinema = document.getElementById("selectCinema");
    nodoMostraFilm = document.getElementById("mostraFilm");
    nodoListaFilm = document.getElementById("listaFilm");
    var listaCinema = calcolaListaCinema();
    creaSelect(nodoSelectCinema, listaCinema);
    nodoMostraFilm.addEventListener('click', gestoreMostraFilm);
  } catch (e) {
    alert("inizializza" + e);
  }
}

window.onload = inzializza;

<select id="selectCinema"></select>
<input type="button" id="mostraFilm" value="Mostra Film">
<br>
<ol id="listaFilm"></ol>