計算を実行する単純なトグルボタン

Question

InchをCMに変換し、CMをInchに変換するトグルボタンを作成しようとしています。ボタンをクリックするとCMに変換し、一度クリックすると現在の値がインチからCMに変換され、その後はボタンがインチに変換され、一度クリックするとCMがインチに変換されます：

わかりません何を私が間違っている以下のやっているが、それは最初に乗算すると仮定だときに最初除しているように見える、とボタンがテキスト最初の時間を変更しません：

var flag=false; 
 
$("#ConvertInchCm").click(function(e){ 
 
    e.stopPropagation(); 
 
    var val = $('#value').text() 
 
    if(flag && ($(this).text() == "Convert to CM")) 
 
    { 
 
     $("#value").text(val*2.54); 
 
     $(this).text("Convert to Inches"); 
 
    } 
 
    else 
 
    { 
 
     $("#value").text(val/2.54); 
 
     $(this).text("Convert to CM"); 
 
    } 
 
     flag=!flag; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="ConvertInchCm">Convert to CM</button> 
 
<div id="value">1</div>

Answer 1

あなたドン旗が必要なのであれば、テキストはあなたがどの州にいるのかを知らせるだけのものでなければなりません。 2つのjQueryオブジェクトの作成を避けるため$(this).text()の代わりにthis.innerHTMLを使用してください。

$("#ConvertInchCm").click(function(e){ 
 
    e.stopPropagation(); 
 
    var val = $('#value').text() 
 
    if(($(this).text() == "Convert to CM")) 
 
    { 
 
     $("#value").text(val*2.54); 
 
     $(this).text("Convert to Inches"); 
 
    } 
 
    else 
 
    { 
 
     $("#value").text(val/2.54); 
 
     $(this).text("Convert to CM"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="ConvertInchCm">Convert to CM</button> 
 
<div id="value">1</div>