script não executa

[Biel. 9]

Boa tarde a todos. Direto ao ponto. Pessoal o código abaixo é para ocultar e exibir o que estiver dentro da divA e divB . Até aqui tudo bem.

O problema é que ao selecionar um item qualquer e em seguida CLICAR em enviar a coisa não funciona de primeira ou seja para que funcione, tenho que selecionar um item e depois selecionar outro item e em seguida CLICAR em enviar. Dessa forma não quero! Gostaria que funcionasse de primeira independentemente do item que for selecionado. 

NOTA:  Não quero retirar o required do input type.

 

<form action="executou.php">
voce selecionou:
<select name="voceselecionou" id="idSelect" required onChange="mudarEstado();">
  <option  value="">--selecione--</option>
  <option  value="pessoa" >pessoa</option>
  <option  value="fruta" >fruta</option>
</select>
<br />

<div id="divA">digite joao <input type="text" name="nome" required placeholder="digite joao"  /></div>
<div id="divB">digite goiaba<input type="text" name="goiaba" required placeholder="digite goiaba"  /></div>
  
<script type="text/javascript">

document.getElementById("divA").style.display = "none"; //oculta 
document.getElementById("divB").style.display = "none"; //oculta 

function mudarEstado() {

var forIgual = document.getElementById("idSelect").value;

if (forIgual == "pessoa"){
document.getElementById("divA").style.display = "block"; //exibe
document.getElementById("divB").style.display = "none"; //oculta 
}

else if (forIgual == "fruta"){
document.getElementById("divA").style.display = "none"; //oculta 
document.getElementById("divB").style.display = "block";//exibe
}


}
</script>

<br /><br /><br />
 
<input type="submit"  value="Enviar"  /> 
    
</form>  

 

[marsolim 110]

tenta tirar essas duas primeiras linhas do js aí que tá ocultando a parada e metes-lhe em css pra ficar oculta

[Biel. 9]

31 minutos atrás, marsolim disse:

tenta tirar essas duas primeiras linhas do js aí que tá ocultando a parada e metes-lhe em css pra ficar oculta

marsolim; de inicio, as duas divs é pra ficar oculta mesmo.

[marsolim 110]

por isso falei pra meter elas em css e deixar o js só pra exibir o que for pra exibir

[Electronic 124]

Se os dois campos sao requeridos mas so vai preencher um 

entao nao vai funcionar

ao inves de ocultar, tente remove-lo

[EdCesar 124]

Complementando:
O @Electronic já explicou o motivo do problema, você também pode habilitar ou desabilitar o required da seguinte forma:

document.querySelector("#divB input").required = false;

E então coloque nas suas condições ajustando para false ou true para a divA e divB de acordo com a necessidade