在搜索字段中一个接一个地插入值，同时用同一个按钮一个接一个地显示图像？

Question

通过这段代码，我们可以将4个不同的文本值一个接一个地插入搜索字段（“装饰”，“健康”，“乐趣”，“昨天4”）。

但是我需要同时为每个文本值插入一个图像（逻辑上显示在搜索字段之外）。 请注意，下一个图像应该出现在第一个图像的位置，并删除这一个。

参见:http://jsfiddle.net/7bpal5hy/

null

   
const myValues = ['Decoration', 'Health', 'Fun', 'Yesterday 4'];
let myInd = 0;

function setValue() {
    document.getElementById('bbb').value = myValues[myInd];
    myInd = myInd >= (myValues.length - 1) ? 0 : myInd+1;
}
   

html prettyprint-override"><form id="form1" name="form1" method="post">
    <p>
        <input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />
    </p>
    <p>
        <label>
            <input type="text" name="bbb" id="bbb" />
        </label>
    </p>
</form>

null

Answer 1

您需要包含图像标记和图像列表作为排列，请看下面的示例

null

js lang-js prettyprint-override">let init = 0;
const input = document.querySelector("input");
const img = document.querySelector("img");
const myValues = [
  {
    value: "Item 1",
    image: "item-1.png",
  },
  {
    value: "Item 2",
    image: "item-2.png",
  },
  {
    value: "Item 3",
    image: "item-3.png",
  },
  {
    value: "Item 4",
    image: "item-4.png",
  },
];

document.querySelector("form").addEventListener("submit", submitHandler);

function submitHandler(event) {
  event.preventDefault();

  const { value, image } = getCurrentValue();

  input.value = value;
  img.src = image;
  img.alt = value;

  updateInit();
}

function getCurrentValue() {
  return myValues[init];
}

function updateInit() {
  if (init < myValues.length - 1) {
    init += 1;
  } else {
    init = 0;
  }
}

<img src="" alt="" />
<form>
  <input />
  <button type="submit">Click</button>
</form>