Al hacer clic en el botón onclick="nextText()" puedo seleccionar y mostrar el siguiente elemento en la matriz myText . Esto aparece en div id="target" . Me gustaría usar la etiqueta de entrada: input id="target" value="" para poder enviar el elemento seleccionado a una base de datos con un formulario, pero el elemento seleccionado no aparece en el campo de entrada. Soy un novato, ¿hay alguna manera de hacer esto?
var target = document.getElementById('target'); var counter = 0; var myText = [ "Orange", "Avocados", "Banana", "Berry", "Apple" ]; function nextText() { counter += 1; if (counter > myText.length - 1) { counter = 0; } target.innerHTML = myText[counter]; } <div> <div id="target">Fruits</div> </div> <input type="button" onclick="nextText()" value="change Text" />Por diversión, cambié su matriz a una <datalist> (por lo que el usuario puede elegir presionar el botón o comenzar a escribir en la entrada y obtener sugerencias), pero tiene el mismo tipo de funcionalidad: puede ver la función que usted made es solo parte de un detector de eventos.
Entonces, para responder a su pregunta: para cambiar el valor de <input> , asigne el valor a .value (aquí e.target.form.fruits.value ).
var counter = 0; document.forms.form01.change.addEventListener('click', e => { counter++; if (counter > e.target.form.fruits.list.children.length - 1) { counter = 0; } e.target.form.fruits.value = e.target.form.fruits.list.children[counter].value; }); /*this submit event listener is just for testing depending on your use case, do something else...*/ document.forms.form01.addEventListener('submit', e => { e.preventDefault(); let formData = new FormData(e.target); console.log([...formData.values()]); }); <div> <div id="target">Fruits</div> </div> <form name="form01"> <input list="fruitsList" name="fruits" /> <datalist name="fruitsList" id="fruitsList"> <option value="Orange"> <option value="Avocados"> <option value="Banana"> <option value="Berry"> <option value="Apple"> </datalist> <input name="change" type="button" value="change Text" /> <button>Submit</button> </form>