搜索演员 JS

Question

我正在创建一个功能来查找我搜索的演员制作的所有电影，这些电影在一个 js 文件中，如下所示：

var filmlist = [ 
  {"Title":"Killer's Kiss", "Actors":"Frank Silvera, Jamie Smith, Irene Kane, Jerry Jarrett"}
];

var a = document.getElementById("film");

function findActors() {
  var x = document.getElementById("actor").value;
  var y = document.getElementById("actorfilm");

  a.innerHTML = "Movies with this actor: " 
  for (var i=0; i<filmlist.length; i++) {
    if (x.indexOf(filmlist[i].Actors) !== -1) {
      y.innerHTML = (filmlist[i].Title + "<br/>")
    }
  }
}

<textarea rows="2" cols="50" id="actor" placeholder="write actor name, and press the button"></textarea>
<button onclick="findActor()">ActorButton</button>

<p id="film"></p>
<p id="actorfilm"></p>

出于某种原因，它不会显示演员，但会显示第一个 a.innerhtml 我是 javascript 的新手，非常感谢您的帮助。

Answer 1

您目前正在用上一部电影的片名覆盖 y.innerHTML。要附加到内部 HTML 使用：

y.innerHTML += (filmlist[i].Title + "<br/>")

你的 indexOf 有问题，在另一个答案中提到，可以用

修复

if (filmlist[i].Actors.indexOf(x)) {

最后，您的 HTML 错误地引用了 js 函数，应该是：

<button onclick="findActors()">ActorButton</button>

Answer 2

你快到了，只是你的if条件需要扭转。

if (filmlist[i].Actors.indexOf(x) )

您在您输入的值内检查演员的超集，而不是反过来做。

你可以通过

使它更精确

var filteredFilms = filmlist.filter( s => s.Actors.indexOf(x) != -1 );
var output = filteredFilms.map( s => s.Title ).join( "<br/>" );

演示

var filmlist = [{
  "Title": "Killer's Kiss",
  "Actors": "Frank Silvera, Jamie Smith, Irene Kane, Jerry Jarrett"
}];

var a = document.getElementById("film");

function findActors() {

  var x = document.getElementById("actor").value;
  var y = document.getElementById("actorfilm");
  a.innerHTML = "Movies with this actor: "
  var filteredFilms = filmlist.filter(s => s.Actors.indexOf(x) != -1);
  y.innerHTML = filteredFilms.map(s => s.Title).join("<br/>");

}

<!-- find actor function -->
<textarea rows="2" cols="50" id="actor" placeholder="write 
actor name, and press the button">Frank Silvera</textarea>

<button onclick="findActors()">ActorButton</button>


<p id="film"></p>

<p id="actorfilm"></p>

搜索演员 JS

Searching for actors JS

javascript

for-loop

innerhtml