2016-12-13 6 views
0

Also ich bin neu in JavaScript. Ich versuche, einen einfachen Code zu erstellen, der es der Person ermöglicht, binary, hex oder oct auszuwählen und eine Dezimalzahl in das ausgewählte Optionsfeld zu konvertieren. Jetzt mache ich mir keine Gedanken über die Konvertierung. Ich versuche nur, den Code zum Ausführen einer Funktion zu bekommen, nachdem ich auf submit geklickt habe. Wenn zum Beispiel Optionsfeld binär ausgewählt ist, sollte nach dem Klicken auf die Schaltfläche Senden auf der Seite "binary selected" angezeigt werden.JavaScript Radio Buttons bei Einreichen

Ich bin wirklich verloren, wie man dies zur Arbeit und nicht sicher, wo man sucht. Ich ändere meinen Code, ich habe es funktioniert, wenn Sie die Schaltfläche wählen, generieren Sie "Objekt ausgewählt", aber ich möchte es erst generieren, nachdem die Schaltfläche Senden gedrückt wurde. Unsicher, ob ich die Übermittlungsschaltfläche oder das Formular-Tag codieren muss. Mein kurzfristiger, nicht funktionierenden Code lautet wie folgt:

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script> 
 

 

 
\t \t function convertit() 
 
\t \t { 
 
\t \t \t 
 
\t \t \t var conversion = document.getElementsByName('convert'); 
 

 

 
\t \t \t if (conversion[0].checked == true) 
 
\t \t \t { 
 
\t \t \t \t document.getElementById('test').innerHTML = "Binary Checked"; 
 
\t \t \t } 
 

 

 
\t \t \t else if (conversion[1].checked == true) \t 
 
\t \t \t { 
 
\t \t \t \t document.getElementById('test').innerHTML = " Hex Checked"; 
 
\t \t \t } 
 

 
\t \t \t else if (conversion[2].checked == true) \t 
 
\t \t \t { 
 
\t \t \t \t document.getElementById('test').innerHTML = "Oct Checked"; 
 
\t \t \t } 
 

 
    \t \t \t else 
 
\t \t \t { 
 
\t \t \t \t alert("Empty"); 
 
\t \t \t } 
 
\t \t \t return true; 
 
\t \t } 
 

 
\t 
 

 
\t 
 

 

 
\t \t </script> 
 
\t </head> 
 

 

 

 

 
\t <body> 
 

 
\t \t <p id="test"> </p> 
 

 
\t \t <form onsubmit="return convertit();"> 
 
\t \t \t <input type="radio" value="binary" name="convert" id="binarybut" > 
 
\t \t \t \t Binary 
 
\t \t \t </input> 
 

 
\t \t \t <input type="radio" value="binary" name="convert" id="hexbut" > 
 
\t \t \t \t Hex 
 
\t \t \t </input> 
 

 
\t \t \t <input type="radio" value="hex" name="convert" id="octbut"> 
 
\t \t \t \t Oct 
 
\t \t \t </input> 
 

 
\t \t \t <input type="submit" value="Convert Number" > 
 

 

 
\t \t </form> 
 

 

 

 

 

 
</body> 
 
</html>

+0

Ihr Code in Ordnung ist, kehren nur 'false' vom Handler, so dass das Standardformular wird verhindert einreichen. Ihr Formular wird übermittelt, was dazu führt, dass die Seite aktualisiert wird. Daher wird der Standardstatus –

+0

angezeigt. Https://jsfiddle.net/arunpjohny/tm1aoukx/1/ –

+0

Vielen Dank! So froh, dass es eine einfache Lösung war, ich bin den ganzen Tag verrückt geworden, um es zum Laufen zu bringen. Vielen Dank!!! Es funktionierte! – FckItsChey

Antwort

0

Ihr Javascript nicht Ihr Ausgangselement finden kann, weil es noch nicht erklärt ist.

Wenn Sie Ihre < Skript> ... </Skript> am Ende des Körpers, sollte es gut funktionieren.

zB:

... 
< /script> 
< /body> 

Here's a working fiddle

0

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script> 
 

 
\t \t function convertit() 
 
\t \t { 
 
\t \t \t 
 
\t \t \t if (document.getElementById('binarybut').checked) 
 
\t \t \t { 
 
           alert("Binary Checked"); 
 
\t \t \t } 
 

 

 
\t \t \t else if (document.getElementById('hexbut').checked) \t 
 
\t \t \t { 
 
\t \t \t   alert("Hexadecimal Checked"); 
 
\t \t \t } 
 

 
\t \t \t else if (document.getElementById('octbut').checked) \t 
 
\t \t \t { 
 
           alert("Octal Checked"); 
 
\t \t \t } 
 

 
    \t \t \t else 
 
\t \t \t { 
 
\t \t \t \t alert("Empty"); 
 
\t \t \t } 
 
\t \t \t return true; 
 
\t \t } 
 

 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 

 
\t \t <p id="test"> </p> 
 

 
\t \t <form> 
 
\t \t \t <input type="radio" value="binary" name="convert" id="binarybut" > 
 
\t \t \t \t Binary 
 
\t \t \t </input> 
 

 
\t \t \t <input type="radio" value="binary" name="convert" id="hexbut" > 
 
\t \t \t \t Hex 
 
\t \t \t </input> 
 

 
\t \t \t <input type="radio" value="hex" name="convert" id="octbut"> 
 
\t \t \t \t Oct 
 
\t \t \t </input> 
 

 
\t \t \t <button type="button" onclick="convertit()">Convert</button> 
 

 

 
\t \t </form> 
 
</body> 
 
</html>

+0

@ssheatler Dose diese Antwort Ihre Frage können Sie den Code ausführen und versuchen, CSS kann später nach Abschluss der Funktionalitäten getan werden –

+0

Glück, das ist, was Sie richtig @ssheatler benötigt –