javascript:根据选择框值显示图像

Question

在我的程序中，我创建了选择框和按钮。从选择框中选择不同的值后，图像应如预期输出所示显示。前后有两个按钮可以更改图像。这也应该相应地工作。我在下面创建了代码，但我的代码没有按预期工作。谁能帮帮我？

代码:

// counter
var i = 0;

// create object
imageObj = new Image(128, 128);

// set image list
images = new Array();
images[0] = "final_images/wcoat.jpg";
images[1] = "final_images/wcoat.jpg";
images[2] = "final_images/ktoys.jpg";
images[3] = "final_images/mixture.jpeg";
images[4] = "final_images/earing.jpg";

var imgLen = imageObj.length;

var go = document.getElementById('go');
go.addEventListener("click", loadItem);

function loadItem() {

  var mainDiv = document.getElementById("main");

  var btnPre = document.createElement("input");
  //Assign different attributes to the element. 
  btnPre.type = "button";
  btnPre.value = "previous";
  btnPre.id = "preBtn";

  mainDiv.appendChild(btnPre);

  preBtn.addEventListener('click', prvs);

  var holder = document.getElementById("holder");

  if (document.getElementById('selectBox').value == "womens") {
    holder.src = images[0] + "<br>" + " Women's coat";
  } else if (document.getElementById('selectBox').value == "mens") {
    holder.src = images[1] + "<br>" + " Men's coat";
  } else if (document.getElementById('selectBox').value == "kids") {
    holder.src = images[2] + "<br>" + " Kid's toys";
  } else if (document.getElementById('selectBox').value == "mixture") {
    holder.src = images[3] + "<br>" + " Classic mixture";
  } else if (document.getElementById('selectBox').value == "earing") {
    holder.src = images[4] + "<br>" + " Gold Earing";
  }

  var btnNxt = document.createElement("input");
  //Assign different attributes to the element. 
  btnNxt.type = "button";
  btnNxt.value = "next";
  btnNxt.id = "nxtBtn";

  mainDiv.appendChild(btnNxt);

  nxtBtn.addEventListener('click', nxt);
}

function nxt() {
  if (i < imgLen - 1) {
    i++;
  } else {
    i = 0;
  }

  imageObj.src = images[i];
}

function prvs() {
  if (i > 0) {
    i--;
  } else {
    i = imgLen - 1;
  }
  imageObj.src = images[i];
}

body {
  background-image: url("final_images/back.jpg");
}

.container {
  /*width: 600px;*/
  /*height: 200px;*/
  border: inset;
  background-color: rgba(255, 234, 134, 0.9);
}

#selectBox {
  margin-left: 210px;
  width: 160px;
}

#below_hr {
  width: 600px;
  background-color: #ffffff;
}

#preBtn {
  margin-left: 170px;
  margin-top: 170px;
}

<div class='container' id="main">
  <form name="myForm">
    <select name="mySelect" id="selectBox">
        				<option value="womens">Women's coat</option>
        				<option value="mens">Men's coat</option>
        				<option value="kids">Kid's toys</option>
        				<option value="mixture">Classic mixture</option>
        				<option value="earing">Gold Earing</option>
        			</select>
    <INPUT TYPE="button" VALUE="Go" id="go">
    </INPUT>
  </form>
  <HR size="4" color="red" id="hr">

  <div id="holder"> </div>
</div>

Answer 1

有一些小错误加在一起导致无法正常工作，我会尽量记住并指出它们。这是一个只有 2 张图片的工作示例 - 你可以填回你的图片

1. 你的图像“holder”有一个 div，它应该是 <img />标签
2. var imgLen = imageObj.length;应该是 var imgLen = images.length;使用数组的长度而不是对象。
3. preBtn.addEventListener应该是 btnPre. preBtn不存在
4. holder.src = images[0] + "<br>" + " Women's coat"; src 属性需要是一个有效的 url，当你附加 <br> 时你会搞砸它和一个字符串。
5. imageObj.src=images[i];需要引用您的“持有人”而不是 imageObj所以应该是document.getElementById("holder").src = images[i];
6. 您不需要在每次加载图像时动态放置下一个和上一个按钮(您甚至不需要清除它们)，这样 DOM 就会不断堆积按钮。
7. 您应该使用数字作为值，以便您可以将选择设置为下一个和上一个的正确描述
8. 您需要在用户跳转到选择时跟踪 i(在选择更改时设置 i)

// counter
var i = 0;

// create object
imageObj = new Image(128, 128);

// set image list
images = new Array();
images[0] = "https://cdn-image.myrecipes.com/sites/default/files/summer-sweet-lemonade-cl.jpg";
images[1] = "http://www.greatamericancookies.com/app/themes/greatamericancookies/library/images/home/carousel3.png";
images[2] = "final_images/ktoys.jpg";
images[3] = "final_images/mixture.jpeg";
images[4] = "final_images/earing.jpg";

var imgLen = images.length;

var go = document.getElementById('go');
var select = document.getElementById('selectBox');
var desc = document.getElementById('desc');
go.addEventListener("click", loadItem);

function loadItem() {
  var holder = document.getElementById("holder");

  if (document.getElementById('selectBox').value == 0) {
    holder.src = images[0];
    desc.innerHTML = document.getElementById("select0").getAttribute("data-desc");
    i = 0;
  } else if (document.getElementById('selectBox').value == 1) {
    holder.src = images[1];
    desc.innerHTML = document.getElementById("select1").getAttribute("data-desc");
    i = 1;
  } else if (document.getElementById('selectBox').value == 2) {
    holder.src = images[2];
    desc.innerHTML = document.getElementById("select2").getAttribute("data-desc");
    i = 2;
  } else if (document.getElementById('selectBox').value == 3) {
    holder.src = images[3];
    desc.innerHTML = document.getElementById("select3").getAttribute("data-desc");
    i = 3;
  } else if (document.getElementById('selectBox').value == 4) {
    holder.src = images[4];
    desc.innerHTML = document.getElementById("select4").getAttribute("data-desc");
    i = 4;
  }
  document.getElementById('prev').style.display = "";
  document.getElementById('next').style.display = "";
}

function nxt() {
  if (i < imgLen - 1) {
    i++;
  } else {
    i = 0;
  }
  select.value = i;
  desc.innerHTML = document.getElementById("select" + i).getAttribute("data-desc");
  document.getElementById("holder").src = images[i];
}

function prvs() {
  if (i > 0) {
    i--;
  } else {
    i = imgLen - 1;
  }
  select.value = i;
  desc.innerHTML = document.getElementById("select" + i).getAttribute("data-desc");
  document.getElementById("holder").src = images[i];
}

body {
  background-image: url("final_images/back.jpg");
}

img {
  width: 200px;
}

.container {
  /*width: 600px;*/
  /*height: 200px;*/
  border: inset;
  background-color: rgba(255, 234, 134, 0.9);
}

#selectBox {
  margin-left: 210px;
  width: 160px;
}

#below_hr {
  width: 600px;
  background-color: #ffffff;
}

#preBtn {
  margin-left: 170px;
  margin-top: 170px;
}

<div class='container' id="main">
  <form name="myForm">
    <select name="mySelect" id="selectBox">
    				<option id="select0" data-desc="a womans coat" value=0>Women's coat</option>
    				<option id="select1" data-desc="a mens winter coat" value=1>Men's coat</option>
    				<option id="select2" data-desc="a kids toy to play with" value=2>Kid's toys</option>
    				<option id="select3" data-desc="a classic mixture" value=3>Classic mixture</option>
    				<option id="select4" data-desc="a beautiful gold earing" value=4>Gold Earing</option>
    			</select>
    <INPUT TYPE="button" VALUE="Go" id="go">
    </INPUT>
  </form>
  <HR size="4" color="red" id="hr">

  <img id="holder" /><br/>
  <span id="desc"></span><br/><br/>
  
  <button id="prev" onclick="prvs()" style="display:none">Previous</button>
  <button id="next" onclick="nxt()" style="display:none">Next</button>
</div>