Getting JS zum Lesen der Auswahl aus einem HTML-Formular

Question

Ich versuche, ein Stück JS-Code zu schreiben, die die ausgewählte Option aus einem HTML-Formular <select> erhalten, lesen Sie es und geben Sie mir etwas zurück, je nachdem, was die Option war .

Der HTML-Code sieht wie folgt aus:

<select id="mainhand" name="Main hand" onchange="getmh()"> 
    <option value="Sword" selected> Sword </option> 
    <option value="Axe"> Axe </option> 
    <option value="Mace"> Mace </option> 
</select> 
<p id="mhchoice">choice</p> 
<p id="mhdesc">description</p> 
<p id="mhcost">cost</p> 

und die JS wie folgt aus:

function getmh(option){ 
    if (option == "Sword"){ 
     document.getElementById('mhchoice').innerHTML = 'Sword'; 
     document.getElementById('mhdesc').innerHTML = swordDesc; 
     document.getElementById('mhcost').innerHTML = swordPrice; 
     document.getElementById('ProductImage').src = 'sword.png'; 
    } 
    if (option == "Axe"){ 
     document.getElementById('mhchoice').innerHTML = 'Axe'; 
     document.getElementById('mhdesc').innerHTML = axeDesc; 
     document.getElementById('mhcost').innerHTML = axePrice; 
     document.getElementById('ProductImage').src = 'axe.png'; 
    }  
    if (option == "Mace"){ 
     document.getElementById('mhchoice').innerHTML = 'Mace'; 
     document.getElementById('mhdesc').innerHTML = maceDesc; 
     document.getElementById('mhcost').innerHTML = macePrice; 
     document.getElementById('ProductImage').src = 'mace.png'; 
    } 
} 

Ich habe jetzt fast zwei Stunden lang auf diese aufgeklebt, habe ich mehrere Dinge ausprobiert aber bisher scheint nichts zu funktionieren.

dies hilft

<select id="mainhand" name="Main hand" onchange="getmh(this.value)"> 

Hoffnung:

Answer 1

Als @nnnnnn im Above comment erwähnt, Sie haben gerade den gewählten Wert this.value an die Funktion übergeben.

function getmh(option){ 
 
    if (option == "Sword"){ 
 
    document.getElementById('mhchoice').innerHTML = 'Sword'; 
 
    document.getElementById('mhdesc').innerHTML = swordDesc; 
 
    document.getElementById('mhcost').innerHTML = swordPrice; 
 
    document.getElementById('ProductImage').src = 'sword.png'; 
 
    } 
 
    if (option == "Axe"){ 
 
    document.getElementById('mhchoice').innerHTML = 'Axe'; 
 
    document.getElementById('mhdesc').innerHTML = axeDesc; 
 
    document.getElementById('mhcost').innerHTML = axePrice; 
 
    document.getElementById('ProductImage').src = 'axe.png'; 
 
    }  
 
    if (option == "Mace"){ 
 
    document.getElementById('mhchoice').innerHTML = 'Mace'; 
 
    document.getElementById('mhdesc').innerHTML = maceDesc; 
 
    document.getElementById('mhcost').innerHTML = macePrice; 
 
    document.getElementById('ProductImage').src = 'mace.png'; 
 
    } 
 
}

<select id="mainhand" name="Main hand" onchange="getmh(this.value)"> 
 
    <option value="Sword" selected> Sword </option> 
 
    <option value="Axe"> Axe </option> 
 
    <option value="Mace"> Mace </option> 
 
</select> 
 
<p id="mhchoice">choice</p> 
 
<p id="mhdesc">description</p> 
 
<p id="mhcost">cost</p>

Answer 2

Ich glaube, Sie für den langen Weg gehen. Sie können so etwas versuchen.