2つのフォーム値から総計を取得するにはどうすればよいですか？

私は最近、ウェブサイトを作成するためにJavaScript/HTML/CSSを自分自身で教えることに決めました。私は1ヶ月前に自分自身で学習を始めて、これまでに何ができるかを知るためにウェブサイトに取り組んできました。私はサイトをインタラクティブにするための基本的なJavaScriptをいくつか含めることにしました。これまでのところ、私のプロジェクトを開始するには、私は2つの問題...これまでのところ、私は3つのあなたの名前、あなたが選んだ花の種類が表示されます機能、および花の数を持っているあなたがたときに購入したい2つのフォーム値から総計を取得するにはどうすればよいですか？

に遭遇しました送信ボタンをクリックします。私が立ち往生しているところでは、「レビュー」部門に「注文合計」セクションがあります。その下に、花の種類*花の数となる総費用が表示されます。だから私は基本的には、花の種類と花の数からフォームの値を取る関数を作る方法を知らないで、送信ボタンがクリックされたときに注文合計を与えるようにしています。 3つの花：ヒマワリ、バラ、リリス...そう言うと、ひまわりは$ 5、バラは$ 6、そして$ 7です。
ウェブサイトをブラウザで表示して（私はクロムを使用しています）、ヒットリフレッシュすると、ナビゲーションセクションのボタンのサイズが、以前よりもはるかに小さくなります。また、私がナビゲートボタンに '：ホバー'オプションを追加して、それらの上にカーソルを置いたときに色を変えるようにすると、何も起こりません。私はこれらのボタンの問題の両方が関連していると感じていますが、なぜこれらの問題が発生しているのかわかりません。

これは私の最初の投稿ですので、私はこの権利を行い、私の問題に関する十分な情報を提供したと思います。この初心者のためのこれらの問題のお手伝いをさせていただきます。

コード：

body { 
 
    \t background: #ff0055; 
 
    \t background: linear-gradient(#b30086, #ff0055) fixed; 
 
    
 
    } 
 
    
 
    .header { 
 
    \t width: 740px; 
 
    \t height: 130px; 
 
    \t margin: 20px auto 10px auto; 
 
    \t background: #ff80df; 
 
    \t background: linear-gradient(#ff80df, #ccffdd); 
 
    \t border-radius: 10px 50px 10px 10px; 
 
    \t box-shadow: 5px 5px 10px #3c2f00; 
 
    \t line-height: 130px; 
 
    } 
 
    
 
    .slogan { 
 
    \t font-size: 30px; 
 
    \t float: right; 
 
    \t font-family: 'Syncopate', sans-serif; 
 
    \t margin-right: 50px; 
 
    } 
 
    
 
    .workarea { 
 
    \t 
 
    \t 
 
    \t width:714px; 
 
    \t height: 417px; 
 
    \t background: #ff80df; 
 
    \t background: linear-gradient(#ccffdd, #ff80df); 
 
    \t border-radius: 10px 10px 10px 50px; 
 
    \t box-shadow: 5px 5px 10px #3c2f00; 
 
    \t padding: 20px; 
 
    \t clear: both; 
 
    \t float: left; 
 
    \t margin: 20px auto 20px auto; 
 
    \t position: absolute; 
 
    \t margin-left: 250px; 
 
    } 
 
    \t 
 
    .review { 
 
    \t background: green; 
 
    \t width: 180px; 
 
    \t height: 417px; 
 
    \t margin: 20px auto 20px auto; 
 
    \t float: left; 
 
    \t margin-left:1025px; 
 
    \t position: relative; 
 
    \t padding: 20px; 
 
    \t border-radius: 10px 50px 50px 10px; 
 
    \t box-shadow: 5px 5px 10px #3c2f00; 
 
    \t background: #ff80df; 
 
    \t background: linear-gradient(#ccffdd, #ff80df); 
 
    
 
    } 
 
    
 
    button { 
 
    \t display: block; 
 
    \t width: 150%; 
 
    \t padding: 20%; 
 
    \t border-radius: 50px 10px 10px 50px; 
 
    \t margin-bottom: 30px; 
 
    \t margin: 20px; 
 
    \t background: #ff80df; 
 
    \t background: linear-gradient(#ccffdd, #ff80df); 
 
    \t box-shadow: 5px 5px 10px #3c2f00; 
 
    \t font-weight: bold; 
 
    \t 
 
    \t 
 
    \t \t 
 
    } 
 
    \t \t 
 
    \t \t .nav { 
 
    \t \t \t position: absolute; 
 
    \t \t \t margin: 40px 40px 40px -10px; 
 
    \t \t \t margin-top: 40px; 
 
    \t \t \t 
 
    \t \t } 
 
    \t \t 
 
    \t \t .nav button:not(:last-child) { 
 
    \t \t \t border-bottom: none; 
 
    \t \t } 
 
    \t \t 
 
    \t \t .nav button:hover { 
 
    \t \t \t background-color: green; 
 
    \t \t } 
 
    \t \t 
 
    #but2, #but3 { 
 
    \t margin-top: 50px; 
 
    }

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="flower.css" type="text/css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Syncopate" rel="stylesheet"> 
 
    <script> 
 
    function showName() { 
 
    document.getElementById("display").innerHTML = document.getElementById("name").value; 
 
    } 
 
    
 
    function showType() { 
 
    document.getElementById("display2").innerHTML = document.getElementById("typeFlo").value; 
 
    } 
 
    
 
    function showNumber() { 
 
    document.getElementById("display3").innerHTML = document.getElementById("numFlo").value; 
 
    
 
    
 
    
 
    } 
 
    
 
    </script> 
 
    
 
    </head> 
 
    
 
    <body> 
 
    <div class="header"> 
 
    <span class="slogan">Miss Lemon's Flower Shop</span> 
 
    
 
    
 
    </div> 
 
    
 
    
 
    <div class="workarea"> 
 
    
 
    <h3>Place your order below!</h3> 
 
    
 
    <form> 
 
    <p>Your Name: 
 
    <input type="text" id="name" placeholder="Enter your name"></p><br> 
 
    <p>Type of flower: 
 
    <select id="typeFlo"> 
 
    <option>Sunflower</option> 
 
    <option>Roses</option> 
 
    <option>Lily</option> 
 
    </select></p><br> 
 
    <p>Number of flowers: 
 
    <input type="number" id="numFlo" placeholder="How many flowers?"></p><br> 
 
    </form> 
 
    <input type="submit" onclick="showName(); showType(); showNumber();"> 
 
    </div> 
 
    
 
    <div class="review"> 
 
    <b><span id="display" style="color: red"></span><br> Review your order below</b><br><br><br> 
 
    
 
    <b>Type of flower:</b><br> 
 
    <span id="display2"></span> 
 
    <br><br> 
 
    <b>Number of Flowers:</b><br> 
 
    <span id="display3"></span> 
 
    <br><br> 
 
    <b>Order Total:</b><br> 
 
    <span id="display4"></span> 
 
    <br><br><br> 
 
    <input type="submit" value="checkout"> 
 
    
 
    </div> 
 
    
 
    <div class="nav"> 
 
    <button id="but1">Home</button> 
 
    <button id="but2">Products</button> 
 
    <button id="but3">Buy Now</button> 
 
    
 
    </div> 
 
    
 
    
 
    
 
    </body> 
 
    </html>

出典

2017-07-14 klaus27

、型を取得価格にそれを変換し、数量を乗じて、合計としてのことを示しています。 – Barmar

最初に、入力用のpタグを実際のラベルに置き換えました。その後、最初のボタンをサブミットの代わりに実際のボタンに変更しました。次に、花の型を取り、配列のコストを取得し、合計をorder divに入れる、別の関数showTotal（）を作成しました。これらの機能の4つすべてを組み合わせることができない理由はありませんが。

showTotal関数は、花の型の値をオブジェクトに格納し、選択した花のタイプと花の数を読み取り、合計を計算して2小数点まで表示します。

あなたのホバーが機能しなかった理由は、背景：直線勾配のためです。あなたの背景色は変化していた、それは線形グラデーションの直下だった。

How to check if a variable is an integer in JavaScript? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

function showName() 
 
{ 
 
    document.getElementById("display").innerHTML = document.getElementById("name").value; 
 
} 
 

 
function showType() 
 
{ 
 
    document.getElementById("display2").innerHTML = document.getElementById("typeFlo").value; 
 
} 
 

 
function showNumber() 
 
{ 
 
    document.getElementById("display3").innerHTML = document.getElementById("numFlo").value; 
 
} 
 

 
function showTotal() 
 
{ 
 
    //flower prices in object 
 
    var flowerPrices = { 
 
    'Sunflower': 5, 
 
    'Roses': 6, 
 
    'Lily': 7 
 
    }; 
 
    var numberFlowers = document.getElementById('numFlo').value; 
 
    var flowerType = document.getElementById('typeFlo').value; 
 
    var total = 0; 
 
    var totalContainer = document.getElementById('display4'); 
 
    
 
    //check for integer 
 
    if (!isNaN(numberFlowers) && 
 
     parseInt(Number(numberFlowers)) == numberFlowers && 
 
     !isNaN(parseInt(numberFlowers, 10)) && 
 
     //check that valid flower is selected 
 
     flowerPrices.hasOwnProperty(flowerType) 
 
    ) { 
 
     //get total 
 
     total = flowerPrices[flowerType] * numberFlowers; 
 
     //format to 2 decimal places 
 
     totalContainer.innerHTML = '$' + total.toFixed(2); 
 
    } 
 
}

body { 
 
    background: #ff0055; 
 
    background: linear-gradient(#b30086, #ff0055) fixed; 
 

 
} 
 

 
.header { 
 
    width: 740px; 
 
    height: 130px; 
 
    margin: 20px auto 10px auto; 
 
    background: #ff80df; 
 
    background: linear-gradient(#ff80df, #ccffdd); 
 
    border-radius: 10px 50px 10px 10px; 
 
    box-shadow: 5px 5px 10px #3c2f00; 
 
    line-height: 130px; 
 
} 
 

 
.slogan { 
 
    font-size: 30px; 
 
    float: right; 
 
    font-family: 'Syncopate', sans-serif; 
 
    margin-right: 50px; 
 
} 
 

 
.order-label { 
 
    display: inline-block; 
 
    width: 128px; 
 
} 
 

 
.workarea { 
 
    width:714px; 
 
    height: 417px; 
 
    background: #ff80df; 
 
    background: linear-gradient(#ccffdd, #ff80df); 
 
    border-radius: 10px 10px 10px 50px; 
 
    box-shadow: 5px 5px 10px #3c2f00; 
 
    padding: 20px; 
 
    clear: both; 
 
    float: left; 
 
    margin: 20px auto 20px auto; 
 
    position: absolute; 
 
    margin-left: 250px; 
 
} 
 

 
.review { 
 
    background: green; 
 
    width: 180px; 
 
    height: 417px; 
 
    margin: 20px auto 20px auto; 
 
    float: left; 
 
    margin-left:1025px; 
 
    position: relative; 
 
    padding: 20px; 
 
    border-radius: 10px 50px 50px 10px; 
 
    box-shadow: 5px 5px 10px #3c2f00; 
 
    background: #ff80df; 
 
    background: linear-gradient(#ccffdd, #ff80df); 
 

 
} 
 

 
button { 
 
    display: block; 
 
    width: 150%; 
 
    padding: 20%; 
 
    border-radius: 50px 10px 10px 50px; 
 
    margin-bottom: 30px; 
 
    margin: 20px; 
 
    background: #ff80df; 
 
    background: linear-gradient(#ccffdd, #ff80df); 
 
    box-shadow: 5px 5px 10px #3c2f00; 
 
    font-weight: bold; 
 
} 
 

 
     .nav { 
 
      position: absolute; 
 
      margin: 40px 40px 40px -10px; 
 
      margin-top: 40px; 
 

 
     } 
 

 
     .nav button:not(:last-child) { 
 
      border-bottom: none; 
 
     } 
 

 
     .nav button:hover { 
 
      background: linear-gradient(#0F0, #ff80df); 
 
     } 
 

 
#but2, #but3 { 
 
    margin-top: 50px; 
 
} 
 

 
#but1:hover { 
 
    color: #00F; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title></title> 
 
<link rel="stylesheet" href="flower.css" type="text/css"> 
 
<link href="https://fonts.googleapis.com/css?family=Syncopate" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="header"> 
 
    <span class="slogan">Miss Lemon's Flower Shop</span> 
 
    </div> 
 

 
    <div class="workarea"> 
 
    <h3>Place your order below!</h3> 
 
    <form> 
 
     <label for="name" class="order-label">Your Name:</label> 
 
     <input type="text" id="name" placeholder="Enter your name"><br> 
 
     
 
     <label for="typeFlo" class="order-label">Type of flower: </label> 
 
     <select id="typeFlo"> 
 
      <option>Sunflower</option> 
 
      <option>Roses</option> 
 
      <option>Lily</option> 
 
     </select><br> 
 
     
 
     <label for="numFlo" class="order-label">Number of flowers: </label> 
 
     <input type="number" id="numFlo" placeholder="How many flowers?"><br> 
 
    </form> 
 
    <input type="button" onclick="showName(); showType(); showNumber(); showTotal();" value="Show Totals"> 
 
    </div> 
 

 
    <div class="review"> 
 
    <b><span id="display" style="color: red"></span><br> Review your order below</b><br><br><br> 
 

 
    <b>Type of flower:</b><br> 
 
    <span id="display2"></span> 
 
    <br><br> 
 
    <b>Number of Flowers:</b><br> 
 
    <span id="display3"></span> 
 
    <br><br> 
 
    <b>Order Total:</b><br> 
 
    <span id="display4"></span> 
 
    <br><br><br> 
 
    <input type="submit" value="checkout"> 
 
    </div> 
 

 
    <div class="nav"> 
 
    <button id="but1">Home</button> 
 
    <button id="but2">Products</button> 
 
    <button id="but3">Buy Now</button> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-07-14 03:15:41 Russell

これは、計算の合計で、あなたの問題を解決する必要があります。 price_arrayに注意してカスタマイズしてください。ここでのロジックは、@ Barmarによって説明されています。

function showOrderTotal() { 
    var price_array = {"Sunflower": 5, "Roses": 6, "Lily": 7}; 
    var str = document.getElementById("numFlo").value; 
    if (str && str.length > 0) 
    var countis = str; 
    else 
    var countis = 0; 
    document.getElementById("display4").innerHTML = price_array[document.getElementById("typeFlo").value] * countis; 
}

あなたのCSSについては、これを代わりに使用してください。背景色の代わりに背景を使用して、使用した線グラデーションを取り消すことに注意してください。私はまた、それがクリック可能であることを示すためにカーソルをホバー上に変更しました。

.nav > button:hover { 
    background: green; 
    cursor: pointer; 
}

出典

2017-07-14 03:02:02 ajib

2つのフォーム値から総計を取得するにはどうすればよいですか？

答えて

関連する問題