2017-02-02 13 views
0

以下は私のコードです。関数のチェックボックスの値を使用して、それをテキストボックスに表示する必要があります。私は関数を変更しようとしましたが、私はそれを得ることができません。書式設定とすべてがうまくいけば、私はそれがjscriptの構文でなければならないと思います。それは関数呼び出し(foo (something);)の構文だから15.99は関数ではありませんというエラーがスローされますJavascript;チェックボックス機能

function getTotal(redDress, blueDress, greenDress) { 
 
     var redDress= 15.99 (document.getElementById("redDress").checked); 
 
     var blueDress= 19.99 (document.getElementById("blueDress").checked); 
 
     var greenDress= 20.99(document.getElementById("greenDress").checked); 
 
     var subtotal= greenDress + blueDress + redDress; 
 
     var taxAmount = .07; 
 
     var tax = subtotal * taxAmount; 
 
     var total = subtotal + tax; 
 

 
     if((redDress=false)&&(blueDress=false)&&(greenDress=false)){ 
 
      alert("Please select a dress"); 
 
      return false && true; 
 
     } 
 
    }
<form method ="get" onsubmit="return is_checked()"> 
 
     <p>Please select one or more dresses then hit submit:</p> 
 
     <input type="checkbox" value="15.99" id="redDress">Red Dress ($15.99) <br> 
 
     <input type="checkbox" value="19.99" id="blueDress">Blue Dress ($19.99)<br> 
 
     <input type="checkbox" value="20.99" id="greenDress">Green Dress ($20.99) <br> 
 
     <input type="submit" value="submit" onclick="getTotal()"><br> 
 
    <br> 
 
     <br> 
 
     Subtotal:<input type="text" name="subtotal" id="subTotal"> 
 
     <br> 
 
     <br> 
 
     Total:<input type="text" name="total" id="total" ><br> 
 
     <br> 
 
     Tax:<input type="text" name="tax" id="tax" > 
 
     <br><br> 
 
     This purchase was made on: 
 
    </form>

+0

コンソールにはどのようなエラーがありますか? - 文法が正しくないと分かります - この質問を改善するヒントについては[ask]ページをお読みください – ochi

+2

'redDress = 15.99(document.getElementById(" redDress "))。あなたが何をしようとしているのかわからない – epascarello

+0

[javascriptでequals '='を比較する方法]の可能な複製(http://stackoverflow.com/questions/34760522/how-to-compare-equals-in- javascript) – ochi

答えて

0

このvar redDress= 15.99 (document.getElementById("redDress").checked);助けます。 、ユーザーがredDressチェックボックスをチェックすると

var redDress = 0; 
if(document.getElementById("redDress").checked) 
    redDress = 15.99; 

(:(多かれ少なかれ)と同じである

var redDress= (document.getElementById("redDress").checked)? 15.99: 0; 

:私は何を探していることは、このような三項演算子だと思いますredDressの値は15.99になります。それ以外の場合は、デフォルトの0になります)。

注1:blueDressgreenDressのために同じことを行う、と​​。

注2:ユーザーが何かを選択しているかどうかを確認するために、総subtotalはこのように、0かないに等しい場合だけチェック:

if(subtotal == 0){ 
    alert("Please select a dress"); 
    return false; // return false , not false && trus which is the same as false 
} 

注3:持ってする必要はありませんこれらの引数は、関数内で再定義した場合に使用します。だから、この:

function getTotal(redDress, blueDress, greenDress) { 
    //... 

はただ次のようになります。

function getTotal() { 
    // ... 
0

最速の修正プログラムは、あなたの価格変数のための三元系を用いることであろう。

var redDress = document.getElementById("redDress").checked ? 15.99 : 0; 
//if redDress is checked, redDress price = 15.99, else 0 
var blueDress= document.getElementById("blueDress").checked ? 19.99 : 0; 
//if blueDress is checked, blueDress price = 19.99, else 0 
var greenDress= document.getElementById("greenDress").checked ? 20.99 : 0; 
//if greenDress is checked, greenDress price = 20.99, else 0 
0

これは、より良い方法かもしれません:

https://jsfiddle.net/e4085pap/

ここでは、あなたの元のコードのコンテキストである:

<html> 
<head> 
<script> 
window.onload = function() { 
    //listen for form submission event 
    document.querySelector('form').addEventListener('submit', function(event) { 
     //prevent default so form doesn't actually submit and reload the page 
     event.preventDefault() 
     //select all of the checkboxes and loop over them so we can determine which one is checked 
     document.querySelectorAll('input[type="checkbox"]').forEach(function(input) { 
      // if the input is checked then pass the cost of the dress to a function that will display the values 
      if (input.checked) { 
       displayValues(Number(input.value)) 
      } 
     }) 
    }) 

    function displayValues(value) { 
     var tax = 0.07; 
     document.querySelector('input[name="subtotal"]').value = value 
     document.querySelector('input[name="total"]').value = value + value * tax 
     document.querySelector('input[name="tax"]').value = tax 
    } 
} 
</script> 
</head> 
<body> 

<form method ="get" onsubmit="return"> 
<p>Please select one or more dresses then hit submit:</p> 
<input type="checkbox" value="15.99" id="redDress">Red Dress ($15.99)<br> 
<input type="checkbox" value="19.99" id="blueDress">Blue Dress ($19.99)<br> 
<input type="checkbox" value="20.99" id="greenDress">Green Dress ($20.99) <br> 
<input type="submit" value="submit"><br> 
<br> 
<br> 
Subtotal:<input type="text" name="subtotal" id="subTotal"> 
<br> 
<br> 
Total:<input type="text" name="total" id="total" ><br> 
<br> 
Tax:<input type="text" name="tax" id="tax" > 
<br><br> 
This purchase was made on: 

</form> 
</body> 
</html> 
+0

には、送信ボタンをクリックすると、各ドレスの数量を尋ねるポップアップが表示され、その要因がテキストボックスの結果に戻ってくるという方法がありますか? – AKAceejaye

+0

私はフィドルを更新しました。https://jsfiddle.net/e4085pap/2/ – macksol

0

このアップデートコードに変数を取得します値を入力し、テキストボックスに結果を表示します(

)。
<html> 
    <head> 
     <script type="text/javascript"> 


function getTotal(redDress, blueDress, greenDress) { 

     var redDress= document.getElementById("redDress").checked ? 15.99 :0; 
     var blueDress= document.getElementById("blueDress").checked ? 19.99 :0; 
     var greenDress= document.getElementById("greenDress").checked ? 20.99 :0; 
     var subtotal= greenDress + blueDress + redDress; 
     var taxAmount = .07; 
     var tax = subtotal * taxAmount; 
     var total = subtotal + tax; 

     if((redDress==false)&&(blueDress==false)&&(greenDress==false)){alert("Please select a dress")} 

     document.getElementById('total').value = total; 
     document.getElementById('subTotal').value = subtotal; 
     document.getElementById('tax').value = tax; 

    } 

     </script> 
    </head> 
    <body> 
     <form method ="get"> 
     <p>Please select one or more dresses then hit submit:</p> 
     <input type="checkbox" value="15.99" id="redDress">Red Dress ($15.99)<br> 
     <input type="checkbox" value="19.99" id="blueDress">Blue Dress ($19.99)<br> 
     <input type="checkbox" value="20.99" id="greenDress">Green Dress ($20.99) <br> 
     <input type="button" value="Display" onclick="getTotal()"><br> 
     <br> 
     <br> 
     Subtotal:<input type="text" name="subtotal" id="subTotal"> 
     <br> 
     <br> 
     Total:<input type="text" name="total" id="total"><br> 
     <br> 
     Tax:<input type="text" name="tax" id="tax" > 
     <br><br> 
     This purchase was made on: 
     </form> 
    </body> 
</html> 
+0

あなたは送信をクリックすると、各ドレスの量を尋ねるポップアップが表示され、その要因がテキストボックス? – AKAceejaye

+0

はい@AKAceejaye、実際には希望の番号を取得する方法は複数あります。ユーザーからのアイテムのチェックボックスをオンにすると、各チェックボックスの後にテキストボックスが表示され、ユーザーはそれぞれのアイテムの数を入力できます。次に、テキストボックス要素から数値を取得し、それを価格の要素として使用することができます。あなたは、あなたが言うように、アイテムの数を入力することでサブミット時に小さなウィンドウをポップアップすることもできますが、カスタムポップアップが必要です。あなたが望むのは、あなたのユーザーが望む情報を得るためにあなたのページにいくつかの入力を持って、それからJSで値を取得してそれを使うことです。 –

0

ここに解決策があります。これで、javascriptからチェックボックスの値を取得できます。 コードサンプル:

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
     function getTotal(redDress, blueDress, greenDress) { 
      var redDress= (document.getElementById("redDress")); 
      var blueDress= (document.getElementById("blueDress")); 
      var greenDress= (document.getElementById("greenDress")); 
      if((redDress.checked==false)&&(blueDress.checked==false)&&(greenDress.checked==false)){ 
       alert("Please select a dress"); 
      } 
      if(redDress.checked==true) 
       console.log(redDress.value); 
      if(blueDress.checked==true) 
       console.log(blueDress.value); 
      if(greenDress.checked==true) 
       console.log(greenDress.value); 
     } 
    </script> 
</head> 
<body> 
    <form method ="get" onsubmit="return is_checked()"> 
     <p>Please select one or more dresses then hit submit:</p> 
     <input type="checkbox" value="15.99" id="redDress">Red Dress ($15.99)<br> 
     <input type="checkbox" value="19.99" id="blueDress">Blue Dress ($19.99)<br> 
     <input type="checkbox" value="20.99" id="greenDress">Green Dress ($20.99) <br> 
     <input type="button" value="submit" onclick="getTotal()"><br> 
    </form> 

</body> 
</html> 
+0

には、送信ボタンをクリックすると、各ドレスの数量を尋ねるポップアップが表示され、その要因がテキストボックスの結果に戻ってくるという方法がありますか? – AKAceejaye