Por que você esta usando blocos de script
e document.write
para escrever os options
? Que comparação você esta tentando fazer dentro o MudarOponente
?
Coloquei num código abaixo o que eu entendi que você quer.
Estou adicionando o evento de onchange
pelo javascript pois se o script for carregado depois do <select>
o onchange
não vai encontrar a função.
O valor inserido no <select>
é o valor do atributo value
da <option>
selecinada, observe que quando eu pego o this.value
é alertado o valor adicionado no atributo value
.
O this
dentro da função se refere ao <select>
que invocou a ação, por isso this.value
para pegar o valor dele.
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
Veja que coloquei no mesmo snippet
a atualização com um form para inserir os valores num <select>
. Com javascript puro fica algo muito "massante". Sugiro que estudo algum framework javascript para te ajudar a fazer isso de uma forma mais fácil como jQuery
, AngularJS
, VueJS
, AureliaJS
, EmberJS
e por ai vai, existem muitos haha