jQuery電卓：ボタンをクリックしたときにボタンの値がテキストスクリーンに表示されない

Question

HTML、CSS、jQueryを使用して独自の電卓を作成しようとしています。計算機には5行のボタンと電卓画面用のテキストフィールドがあります。 私はHTMLとCSSの部分を終えましたが、今は本当の挑戦になります。最初は、数値ボタンの値をクリックしたときに電卓のテキスト画面に表示させようとしています。私はslideUpをdocument.getElementByIdに置き換えたjQuery APIドキュメントにあるこのメソッドに従っています。

$("p").click(function() { $(this).slideUp(); }); 

しかし、計画どおりにはうまくいかなかった。コードを見て、私が間違っていることを教えてください。前もって感謝します。ここではプロジェクト全体は次のとおりです。my first ever javascript calculator

Answer 1

あなたはjQueryライブラリが含まれてい仮定すると、あなたはそれぞれの番号を追加する必要があり、また、calc-screen要素はあなたが.valueを使用して、クリックされた要素の値を追加する必要が入力要素であることを考慮します、innerHTMLの代わりに。

また、$(this).document.getElementById('calc-screen')は動作しないため、エラーが発生するので、document.getElementById('calc-screen')に変更する必要があります。

以下の作業スニペットを実行し、この作業FIDDLEまたはちょうどをご覧ください。

jQuery(document).ready(function($) { 
 
    jQuery(".btn-number").click(function() { 
 
    document.getElementById('calc-screen').value += this.value; 
 
    }); 
 
});

#calc-body, 
 
#calc-screen, 
 
.buttons-row { 
 
    display: block; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    line-height: 2; 
 
} 
 
#calc-body { 
 
    background-color: #8d9194; 
 
    border: 10px solid #697076; 
 
    border-radius: 55px; 
 
    width: 300px; 
 
    height: 400px; 
 
    padding: 50px 0px; 
 
    margin-top: 5%; 
 
    margin-bottom: 5%; 
 
} 
 
#calc-screen { 
 
    background-color: #697076; 
 
    border: 2px solid white; 
 
    border-radius: 25px; 
 
    color: white; 
 
    font-family: Anto, sans-serif; 
 
    font-size: 18px; 
 
    width: 250px; 
 
} 
 
#first-row { 
 
    margin-top: 20px; 
 
} 
 
.btn-clear, 
 
.btn-plus-negative, 
 
.btn-divide, 
 
.btn-multiply, 
 
.btn-number, 
 
.btn-minus, 
 
.btn-decimal { 
 
    background-color: #718598; 
 
    border: 2px solid white; 
 
    border-radius: 15px; 
 
    font-family: Anto, sans-serif; 
 
    font-size: 18px; 
 
    color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
.btn-equal { 
 
    background-color: #718598; 
 
    border: 2px solid white; 
 
    border-radius: 20px; 
 
    color: white; 
 
    font-family: Anto, sans-serif; 
 
    font-size: 18px; 
 
    width: 160px; 
 
    height: 50px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
input[class="btn-number"]:hover { 
 
    background-color: #9cafbd; 
 
} 
 
input[value="C"]:hover { 
 
    background-color: red; 
 
} 
 
input[value="="]:hover { 
 
    background-color: green; 
 
} 
 
#first-row, 
 
#third-row, 
 
#fifth-row { 
 
    background-color: rgba(255, 255, 255, 0.3); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="calc-body"> 
 
    <input type="text" id="calc-screen" disabled="disabled"> 
 
    <!-- end of #calc-screen --> 
 
    <row class="buttons-row" id="first-row"> 
 
    <input type="button" class="btn-clear" value="C"> 
 
    <input type="button" class="btn-plus-negative" value="+-"> 
 
    <input type="button" class="btn-divide" value="%"> 
 
    <input type="button" class="btn-multiply" value="x"> 
 
    </row> 
 
    <!-- end of .buttons #second-row --> 
 
    <row class="buttons-row" id="second-row"> 
 
    <input type="button" class="btn-number" value="7"> 
 
    <input type="button" class="btn-number" value="8"> 
 
    <input type="button" class="btn-number" value="9"> 
 
    <input type="button" class="btn-minus" value="-"> 
 
    </row> 
 
    <!-- end of .buttons #second-row --> 
 
    <row class="buttons-row" id="third-row"> 
 
    <input type="button" class="btn-number" value="4"> 
 
    <input type="button" class="btn-number" value="5"> 
 
    <input type="button" class="btn-number" value="6"> 
 
    <input type="button" class="btn-minus" value="+"> 
 
    </row> 
 
    <!-- end of .buttons #third-row --> 
 
    <row class="buttons-row" id="fourth-row"> 
 
    <input type="button" class="btn-number" value="1"> 
 
    <input type="button" class="btn-number" value="2"> 
 
    <input type="button" class="btn-number" value="3"> 
 
    <input type="button" class="btn-decimal" value="."> 
 
    </row> 
 
    <!-- end of .buttons #fourth-row --> 
 
    <row class="buttons-row" id="fifth-row"> 
 
    <input type="button" class="btn-number" id="zero" value="0"> 
 
    <input type="button" class="btn-equal" value="="> 
 
    </row> 
 
    <!-- end of .buttons #fifth-row --> 
 
</div> 
 
<!-- end of calc-body -->

Answer 2

いくつかの問題：

• あなたはjQueryライブラリをインポートしませんでした。
• documentに直接アクセスすると、$(this).documentがエラーになります。
• input要素の場合、innerHTMLの代わりにvalueに内容を割り当てる必要があります。
• 新しい値を古い値に追加する必要があります。

このお試しください：HTMLのセクションに

プリペンド<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>を。

jQuery(document).ready(function($){ 
    jQuery(".btn-number").click(function() { 
     document.getElementById('calc-screen').value+=this.value; 
    }); 
});