用于更新搜索字段中的文本但按顺序输入多个值的按钮？

Question

使用此代码，我们可以将单个值发送到搜索字段。现在，考虑到这个例子，我们如何使用相同的按钮按顺序插入更多值，例如：值1，值2，值3 ...？http://jsfiddle.net/g506bxL4/1/<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><script type="text/javascript">        function setValue() {            document.getElementById('bbb').value = "valor 1";    }</script>

Answer 1

您只需制作一个计数器：

var valor = 0;

function setValue() {

  valor++;

  document.getElementById('bbb').value = "valor " + valor;

}

<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>

Answer 2

这是两个解决方案，一个随机插入值，另一个按顺序插入。它们都完美地工作。

http://jsfiddle.net/62wLqz37/1/

<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>

<script type="text/javascript">

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

function setValue() {

  const randomNum = Math.floor(Math.random() * myValues.length); ;

    document.getElementById('bbb').value = myValues[randomNum];

}

</script

http://jsfiddle.net/7bpaL5hy/

<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>

<script type="text/javascript">

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;

}

</script>