0

私は DNA 翻訳者になるものを始めています。DNA テキスト ボックスからテキストを取得し、すべて小文字にするように設定しました。私は多くが働いていることを知っています。ただし、すべてアルファベットであることを検証するために作成された機能は機能していません。私は何が間違っているのだろうかと思っています。最終的な出力は「document.write()」ではありません。これは、機能するかどうかを確認するための一時的なものです。コードは以下です。

HTML:

<!DOCTYPE html>
<html>
    <head>
    <title>DNA Translator</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="script.js"></script>
    <script></script>
    </head>
    <body>
        <div id="wrapper">
            <form>
                <label for="dna">DNA:</label>
                <input type="text" name="dna" placeholder="DNA">
                <label for="mrna">mRNA:</label>
                <input type="text" name="mrna" placeholder="mRNA">
                <label for="trna">tRNA:</label>
                <input type="text" name="trna" placeholder="tRNA">
                <label for="aminoAcids">Amino Acids:</label>
                <input type="text" name="aminoAcids" placeholder="Amino Acids">
                <div class="buttons">
                    <button id="button_translate" type="button">Tanslate</button>
                    <button id="button_clear" type="button">Clear</button>
                </div>
            </form>
        </div>
    </body>
</html>

Javascript:

$(document).ready(function() {
    $('#button_translate').mouseenter(function() {
        $('#button_translate').fadeTo('fast', 1);
    });
    $('#button_translate').mouseleave(function() {
        $('#button_translate').fadeTo('fast', 0.7);
    });
    $('#button_clear').mouseenter(function() {
        $('#button_clear').fadeTo('fast', 1);
    });
    $('#button_clear').mouseleave(function() {
        $('#button_clear').fadeTo('fast', 0.7);
    });
    $('#button_translate').click(function() {
        var dna = $('input[name=dna]').val();
        var dna = dna.toLowerCase();
        function allLetters(text) {  
            var letters = /^[A-Za-z]+$/;  
            if(text.value.match(letters)) {  
                document.write("That is a DNA sequence.");
            }
            else
            {  
                document.write("Not a real DNA sequence.");
            }  
        }

        allLetters(dna);
    });
});

CSS（重要な場合）：

#wrapper {
    margin-top: 10%;
}

label {
    width:100px;
    font-size:18px;
    font-family:"Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica;
    text-align:right;
    float:left;
    clear:left;
    padding-top:5px;
    padding-right:20px;
}

#button_translate {
    float:left;
    opacity:0.7;
    display:inline-block;
    height:35px;
    width:180px;
    background-color:#293FE3;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius:5px;
    text-align:center;
    margin-top:2px;
    /*display:block;*/
    margin:15px auto;
}

#button_clear {
    float:right;
    opacity:0.7;
    display:inline-block;
    height:35px;
    width:180px;
    background-color:#293FE3;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius:5px;
    text-align:center;
    margin-top:2px;
    /*display:block;*/
    margin:15px auto;
}

input[type="text"] {
    width:390px;
    height:20px;
    padding:4px 6px;
    margin-bottom:40px;
    color:#555;
    background-color:#fff;
    border:1px solid #ccc;
    float:left;
    font-size:14px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px; 
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition:border linear .2s, box-shadow linear .2s;
    -moz-transition:border linear .2s, box-shadow linear .2s;
    -o-transition:border linear .2s, box-shadow linear .2s;
    transition:border linear .2s, box-shadow linear .2s
}

form {
    width:524px;
    margin-left:auto;
    margin-right:auto;
}

.buttons {
    text-align:center;
    float:right; 
    width:404px
}

#dna {
}

#mrna {
}

#trna {
}

#aminoacids {
}
4

1 に答える 1