在vanillaJS

Question

在进行API调用时（餐厅列表），我正在动态创建元素列表。 我想当我单击其中一家餐厅的名称时，触发一个函数，该功能更改该餐厅名称的DOM元素的文本（4）“一个餐厅菜单子页面，向下下方”。 可能是采用动态创建的Span元素的名称。或者，理想情况下，通过再次遍历对象来找到正确的名称。 ...他们俩都没有成功。

我将包括完整的代码，因为它可能更清晰，但是如果您只喜欢相关的部分，因为它更具可读性，请告诉我，我将对其进行修改。 请考虑到我还很新，所以您可能会发现许多编码错误和一些奇怪的东西。任何建议都非常欢迎。

var cityId;

function searchCity(cityId) {

  var url = "https://developers.zomato.com/api/v2.1/search?entity_id=" + cityId + "&entity_type=city";
  console.log(url);

  fetch(url, {
      method: "GET",
      headers: {
        "user-key": "761f6ca627cd39bc1f417f361a422990"
      }

    })
    .then(function(res) {
      return res.json();
    })
    .then(function(data) {
      var allData = data.restaurants;

      getRestaurans(allData);

      console.log(allData[0].restaurant.location.address);

    })
    .catch(function(error) {
      console.log(error)
    });
};
console.log(cityId);

function getRestaurans(allData) {
  var restaurantList = document.getElementById("restaurantList");
  restaurantList.innerHTML = ""; // to empty search and allow new search
  // console.log("2")
  for (var i = 0; i < allData.length; i++) {
    //  console.log("3")
    var card = document.createElement("div");
    card.setAttribute("class", "card")



    //add rest. Image
    var restaurantImg = document.createElement("img");
    restaurantImg.setAttribute("src", allData[i].restaurant.featured_image);
    restaurantImg.setAttribute("alt", allData[i].restaurant.name);
    restaurantImg.setAttribute("class", "img-thumbnail");



    //add restaurant name 


    var nameContainer = document.createElement("div");
    nameContainer.setAttribute("class", "nameContainer");
    var spanName = document.createElement("span");
    spanName.setAttribute("class", "name");
    spanName.setAttribute("id", "orpName");
    var restaurantName = allData[i].restaurant.name
    spanName.innerHTML = restaurantName
    var orpName = document.getElementById("orpName")
    orpName.addEventListener('click', changeName);




    //add cuisine type

    var cuisineContainer = document.createElement("div");
    cuisineContainer.setAttribute("class", "cuisineContainer");
    var spanCuisine = document.createElement("span");
    spanCuisine.setAttribute("class", "cuisine");
    var cuisineType = allData[i].restaurant.cuisines;
    spanCuisine.innerHTML = cuisineType;


    //add restaurant address

    var addressContainer = document.createElement("div");
    addressContainer.setAttribute("class", "addressContainer");
    var spanAddress = document.createElement("span");
    spanAddress.setAttribute("class", "address");
    var restaurantAddress = allData[i].restaurant.location.address;
    spanAddress.innerHTML = restaurantAddress;


    //add created elements


    nameContainer.appendChild(spanName);
    cuisineContainer.appendChild(spanCuisine)
    addressContainer.appendChild(spanAddress)
    card.appendChild(restaurantImg);
    card.appendChild(nameContainer);
    card.appendChild(cuisineContainer);
    card.appendChild(addressContainer)

    restaurantList.appendChild(card);
    //  console.log("4")

  }


}

function changeName(restaurantName) {
  var oneName = document.getElementById("oneName");
  console.log(restaurantName)

  oneName.innerHTML = restaurantName

}

.general {
  background-color: rgb(255, 255, 255);
  max-width: 250px;
  margin: auto;
}

#restaurantList {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

.name {
  background-color: grey;
  font-size: 1.17em;
}

.cuisine {
  background-color: cadetblue;
  font-size: .75em;
}

.address {
  background-color: lightgray;
  font-size: .75em
}

img#oneRestaurant {
  width: 200px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: lightgrey;
}

li {
  float: left;
  border-right: 1px solid #ffffff;
}

li:last-child {
  border-right: none
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: darkgrey;
}

<div class="general tonto">
  <div>1)Home page



    <select id="selectCity" onchange="searchCity(value)">
      <option value="280">New York City</option>
      <option value="82">Lisbon</option>
      <option value="311">Porto</option>
      <option value="91">Dublin</option>
      <option value="61">London</option>
      <option value="258">Milan</option>

    </select>
  </div>
</div>

</div>

<div>2)Main Menu Page</div>
<div class="container">
  <div id="card">

  </div>
  <div id="restaurantList">resturants list</div>
</div>
<div>3)One Restaurant page</div>
<div class="container">
  <div>
    <img id="oneRestaurant" alt="restaurant image" src="https://i.ytimg.com/vi/ZawU-NBG6OY/maxresdefault.jpg">
    <p id="orpName" class="spDescription">Restaurant Name</p>
    <p class="spDescription">Address</p>

  </div>

  <ul>
    <li><a class="#menu" href="#home">Menu</a></li>
    <li><a href="#reviews">Reviews</a></li>
    <li><a href="#takeme">Take me there</a></li>
  </ul>

</div>


<div>4)One Restaurant Menu subpage</div>
<div>5)Map subpage</div>
<div>6)Reviews subpage</div>
<div>7)Login Page</div>
<div>8)Registaration page</div>
<div>9)Chat page</div>
</div>