Why are you using blocks of script
and document.write
to write options
? What comparison are you trying to make in MudarOponente
?
I put in a code below what I understood you want.
I am adding the onchange
event to the javascript because if the script is loaded after <select>
onchange
will not find the function.
The value entered in the <select>
is the value of the value
attribute of the <option>
selected, note that when I get the this.value
the added value is warned in the value
attribute.
The this
within the function refers to the <select>
that invoked the action, so this.value
to get the value of it.
var selectOponente = document.getElementById('selectOponente');
selectOponente.addEventListener('change', function() {
alert(this.value);
});
var formOponente = document.getElementById('formOponente');
formOponente.addEventListener('submit', function() {
if(!this.nome.value) {
alert('informe o nome pelo menos');
return;
}
if(!this.valor.value) {
this.valor.value = this.nome.value;
}
var opcao = document.createElement('option');
opcao.value = this.valor.value;
var textoOpcao = document.createTextNode(this.nome.value);
opcao.appendChild(textoOpcao);
selectOponente.appendChild(opcao);
this.nome.value = null;
this.valor.value = null;
});
<select id="selectOponente"></select>
<hr />
<form id="formOponente">
<label>Nome</label> <br />
<input name="nome" type="text"/>
<br />
<label>Valor</label> <br />
<input name="valor" type="text" />
<br />
<input type="submit" value="Cadastrar" />
</form>
UPDATE
Notice that I put the update with a form in it to insert the values into snippet
. With pure javascript is something very "massante". I suggest that I study some javascript frameworks to help you do this in an easier way like <select>
, jQuery
, AngularJS
, VueJS
, AureliaJS
and so there, there are many haha