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

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() {&nbsp; valor++;&nbsp; document.getElementById('bbb').value = "valor " + valor;}<form id="form1" name="form1" method="post">&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />&nbsp; &nbsp; </p>&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="bbb" id="bbb" />&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; </p></form>

Answer 2

这是两个解决方案，一个随机插入值，另一个按顺序插入。它们都完美地工作。http://jsfiddle.net/62wLqz37/1/<form id="form1" name="form1" method="post">&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />&nbsp; &nbsp; </p>&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="bbb" id="bbb" />&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; </p></form><script type="text/javascript">const myValues = ['Decoration', 'Health', 'Fun', 'Yesterday 4'];function setValue() {&nbsp; const randomNum = Math.floor(Math.random() * myValues.length); ;&nbsp; &nbsp; document.getElementById('bbb').value = myValues[randomNum];}</scripthttp://jsfiddle.net/7bpaL5hy/<form id="form1" name="form1" method="post">&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />&nbsp; &nbsp; </p>&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="bbb" id="bbb" />&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; </p></form><script type="text/javascript">const myValues = ['Decoration', 'Health', 'Fun', 'Yesterday 4'];let myInd = 0;function setValue() {&nbsp; &nbsp; document.getElementById('bbb').value = myValues[myInd];&nbsp; &nbsp; myInd = myInd >= (myValues.length - 1) ? 0 : myInd+1;}</script>