javascript - 如果数字大于单选值的值，则更改样式

标签 javascript html

所以我在顶部有一个单选组，将值输出到一个跨度...然后我有颜色样本，将输入(或跨度)中的总数相加。我想要做的是将文本的颜色更改为粗体红色，如果它超过单选按钮值。它是动态更新的，但我想知道我是否可以使用 php if 语句来更改样式。这是页面的代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style/site-main.css" rel="stylesheet" type="text/css">

<script>
// When the page is ready
$(document).ready(function() {
    $("input").click(function(event) {
        updateTotal();
    });
});

function updateTotal() {
    var total = 0;
    $("input:checked").each(function() {
        total += parseFloat(this.title);
    });
    $('#TotalCost').val("$" + total.toFixed(2));
}

</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="5"){
            $(".box").not(".5").hide();
            $(".5").show();
        }
        if($(this).attr("value")=="10"){
            $(".box").not(".10").hide();
            $(".10").show();
        }
        if($(this).attr("value")=="25"){
            $(".box").not(".25").hide();
            $(".25").show();
        }
        if($(this).attr("value")=="50"){
            $(".box").not(".50").hide();
            $(".50").show();
        }
    });
});
</script>
<script type="text/javascript">
function sum() {
        var clr000 = document.getElementById('000').value;
        var clr010 = document.getElementById('010').value;
        var clr020 = document.getElementById('020').value;
        var clr019 = document.getElementById('019').value;
        var clr021 = document.getElementById('021').value;
        var clr022 = document.getElementById('022').value;
        var clr025 = document.getElementById('025').value;
        var clr026 = document.getElementById('026').value;
        var clr312 = document.getElementById('312').value;
        var clr030 = document.getElementById('030').value;
        var clr031 = document.getElementById('031').value;
        var clr032 = document.getElementById('032').value;
        var clr047 = document.getElementById('047').value;
        var clr034 = document.getElementById('034').value;
        var clr036 = document.getElementById('036').value;
        var clr035 = document.getElementById('035').value;
        var clr404 = document.getElementById('404').value;
        var clr040 = document.getElementById('040').value;
        var clr043 = document.getElementById('043').value;
        var clr042 = document.getElementById('042').value;
        var clr041 = document.getElementById('041').value;
        var clr045 = document.getElementById('045').value;
        var clr562 = document.getElementById('562').value;
        var clr518 = document.getElementById('518').value;
        var clr050 = document.getElementById('050').value;
        var clr065 = document.getElementById('065').value;
        var clr049 = document.getElementById('049').value;
        var clr086 = document.getElementById('086').value;
        var clr067 = document.getElementById('067').value;
        var clr057 = document.getElementById('057').value;
        var clr051 = document.getElementById('051').value;
        var clr098 = document.getElementById('098').value;
        var clr052 = document.getElementById('052').value;
        var clr084 = document.getElementById('084').value;
        var clr053 = document.getElementById('053').value;
        var clr056 = document.getElementById('056').value;
        var clr066 = document.getElementById('066').value;
        var clr054 = document.getElementById('054').value;
        var clr055 = document.getElementById('055').value;
        var clr060 = document.getElementById('060').value;
        var clr613 = document.getElementById('613').value;
        var clr061 = document.getElementById('061').value;
        var clr068 = document.getElementById('068').value;
        var clr062 = document.getElementById('062').value;
        var clr064 = document.getElementById('064').value;
        var clr063 = document.getElementById('063').value;
        var clr080 = document.getElementById('080').value;
        var clr083 = document.getElementById('083').value;
        var clr081 = document.getElementById('081').value;
        var clr082 = document.getElementById('082').value;
        var clr023 = document.getElementById('023').value;
        var clr070 = document.getElementById('070').value;
        var clr073 = document.getElementById('073').value;
        var clr071 = document.getElementById('071').value;
        var clr076 = document.getElementById('076').value;
        var clr074 = document.getElementById('074').value;
        var clr072 = document.getElementById('072').value;
        var clr090 = document.getElementById('090').value;
        var clr091 = document.getElementById('091').value;
        var clr092 = document.getElementById('092').value;

        var result = parseInt(clr000) + parseInt(clr010) + parseInt(clr020) + parseInt(clr019) + parseInt(clr021) + parseInt(clr022) + parseInt(clr025) + parseInt(clr026) + parseInt(clr312) + parseInt(clr030) + parseInt(clr031) + parseInt(clr032) + parseInt(clr047) + parseInt(clr034) + parseInt(clr036) + parseInt(clr035) + parseInt(clr404) + parseInt(clr040) + parseInt(clr043) + parseInt(clr042) + parseInt(clr041) + parseInt(clr045) + parseInt(clr562) + parseInt(clr518) + parseInt(clr050) + parseInt(clr065) + parseInt(clr049) + parseInt(clr086) + parseInt(clr067) + parseInt(clr057) + parseInt(clr051) + parseInt(clr098) + parseInt(clr052) + parseInt(clr084) + parseInt(clr053) + parseInt(clr056) + parseInt(clr066) + parseInt(clr054) + parseInt(clr055) + parseInt(clr060) + parseInt(clr613) + parseInt(clr061) + parseInt(clr068) + parseInt(clr062) + parseInt(clr064) + parseInt(clr063) + parseInt(clr080) + parseInt(clr083) + parseInt(clr081) + parseInt(clr082) + parseInt(clr023) + parseInt(clr070) + parseInt(clr073) + parseInt(clr071) + parseInt(clr076) + parseInt(clr074) + parseInt(clr072) + parseInt(clr090) + parseInt(clr091) + parseInt(clr092);
            if (!isNaN(result)) {
                document.getElementById('ttlQty').value = result;
            }
        }
  </script>
</head>

<body>

<div class="container">
    <div class="header">
      <h3>Package Size</h3> 
<div class="PackContainer">
<div class="radioBtn">
      <label><input type="radio" onclick="myFunction(this.value)" name="packSize" value="5"> 5 sheets</label>
        <label><input type="radio" onclick="myFunction(this.value)" name="packSize" value="10"> 10 sheets</label>
        <label><input type="radio" onclick="myFunction(this.value)" name="packSize" value="25"> 25 sheets</label>
        <label><input type="radio" onclick="myFunction(this.value)" name="packSize" value="50"> 50 sheets</label>
    </div>
    <div class="5 box">$4.45</div>
    <div class="10 box">$8.40</div>
    <div class="25 box">$18.75</div>
    <div class="50 box">$27.50</div>
</div>
</div>
<div class="main">
<div class="counter"> <input type="text" id="ttlQty" /> of <span id="result"></span> remaining.  </div>
  <h3>Colors</h3>
  <div class="colorDiv">
<div class="colorBlock" style="background-color:#DCD9E0;">000 clear<input type="text" id="000" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#E8E9ED;">010 white<input type="text" id="010" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#FFAB00;">020<input type="text" id="020" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#E8A800;">019<input type="text" id="019" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#FEC600;">021<input type="text" id="021" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#F5CA01;">022<input type="text" id="022" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#F3E111;">025<input type="text" id="025" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#64000D;">026<input type="text" id="026" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#74000D;">312<input type="text" id="312" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#960816;">030<input type="text" id="030" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#B8000C;">031<input type="text" id="031" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#D10800;">032<input type="text" id="032" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#DA2F01;">047<input type="text" id="047" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#E44B00;">034<input type="text" id="034" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#EF6701;">036<input type="text" id="036" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#FF6E01;">035<input type="text" id="035" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#422871;">404<input type="text" id="404" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#5F2C65;">040<input type="text" id="040" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#785E9F;">043<input type="text" id="043" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#BC91BC;">042<input type="text" id="042" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#C92A6A;">041<input type="text" id="041" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#F385B6;">045<input type="text" id="045" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock dark" style="background-color:#141D3A;">562<input type="text" id="562" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock dark" style="background-color:#12143D;">518<input type="text" id="518" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock dark" style="background-color:#1C2E5C;">050<input type="text" id="050" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock dark" style="background-color:#10226A;">065<input type="text" id="065" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#142978;">049<input type="text" id="049" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#0F32AA;">086<input type="text" id="086" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#003979;">067<input type="text" id="067" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#013F8C;">057<input type="text" id="057" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#014584;">051<input type="text" id="051" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#014FA2;">098<input type="text" id="098" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#015CAB;">052<input type="text" id="052" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#0173BC;">084<input type="text" id="084" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#0187C4;">053<input type="text" id="053" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#3BA0D4;">056<input type="text" id="056" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#007F8E;">066<input type="text" id="066" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#009999;">054<input type="text" id="054" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#5BCAB7;">055<input type="text" id="055" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock dark" style="background-color:#013F28;">060<input type="text" id="060" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#005037;">613<input type="text" id="613" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#00784B;">061<input type="text" id="061" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#007843;">068<input type="text" id="068" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#00863F;">062<input type="text" id="062" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#1E9903;">064<input type="text" id="064" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#69A62D;">063<input type="text" id="063" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock dark" style="background-color:#442F1E;">080<input type="text" id="080" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#B3591D;">083<input type="text" id="083" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#AA885B;">081<input type="text" id="081" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#CFBF9E;">082<input type="text" id="082" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#EFD394;">023<input type="text" id="023" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock dark" style="background-color:#0E0E10;">070<input type="text" id="070" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#4C4C4C;">073<input type="text" id="073" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#747D7C;">071<input type="text" id="071" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#818588;">076<input type="text" id="076" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#8A8F8B;">074<input type="text" id="074" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#BFC1BE;">072<input type="text" id="072" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#696A6C;">090<input type="text" id="090" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#776233;">091<input type="text" id="091" value="0" onkeyup="sum();" /><br></div>
<div class="colorBlock" style="background-color:#6E401C;">092<input type="text" id="092" value="0" onkeyup="sum();" /><br></div>
    </div>
  <script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="none")
which.style.display="block"
else
which.style.display="none"
}
  </script>
</div>
<div class="footer">

<script>
function myFunction(packSize) {
    document.getElementById("result").innerHTML = packSize;
}
</script>

    <div style="right:10px;"><strong>PACKAGE PRICE</strong><br>
<input name="TotlCost" type="text" id="TotalCost" style="border:1px solid #fff; text-align:right; font-size:38px; font-weight:bolder; color:#3FA9F5; background-color:#333;"  value="$0.00" size="10" readonly/>
</div><!-- Quantity DIVS -->

</div>
</div>
</body>
</html>

最佳答案

问题:

What I am wanting to do is change the color of the text to a a bold red if it goes over the radio button value.

忽略 OP 代码的所有错误...

  • ...我们可以向 .colorBlock 的父级 .colorDiv 添加一个事件监听器。
  • 当用户在任何 .colorBlock > input 中输入任何数字时，.colorDiv 会触发一个 keyup 事件。
  • #ttlQty的值和#result的文本被解析成数字...
  • ...并比较。如果 #ttlQty 的值(count)大于 #result 的值(quantity).. .
  • ...#ttlQty 颜色将为红色...
  • ...否则它的颜色是黑色。

在myFunction函数下添加如下代码:

    var rainbow = document.querySelector('.colorDiv');

    rainbow.addEventListener('keyup', function(event) {
      var count = document.getElementById('ttlQty').value;
      var quantity = document.getElementById('result').textContent;
      if (parseFloat(count) > parseFloat(quantity)) {
        document.getElementById('ttlQty').style.color = 'red';
      }
      else {
        document.getElementById('ttlQty').style.color = 'black';
      }
    }, false);

片段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <link href="style/site-main.css" rel="stylesheet" type="text/css">

  <script>
    // When the page is ready
    $(document).ready(function() {
      $("input").click(function(event) {
        updateTotal();
      });
    });

    function updateTotal() {
      var total = 0;
      $("input:checked").each(function() {
        total += parseFloat(this.title);
      });
      $('#TotalCost').val("$" + total.toFixed(2));
    }
  </script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('input[type="radio"]').click(function() {
        if ($(this).attr("value") == "5") {
          $(".box").not(".5").hide();
          $(".5").show();
        }
        if ($(this).attr("value") == "10") {
          $(".box").not(".10").hide();
          $(".10").show();
        }
        if ($(this).attr("value") == "25") {
          $(".box").not(".25").hide();
          $(".25").show();
        }
        if ($(this).attr("value") == "50") {
          $(".box").not(".50").hide();
          $(".50").show();
        }
      });
    });
  </script>
  <script type="text/javascript">
    function sum() {
      var clr000 = document.getElementById('000').value;
      var clr010 = document.getElementById('010').value;
      var clr020 = document.getElementById('020').value;
      var clr019 = document.getElementById('019').value;
      var clr021 = document.getElementById('021').value;
      var clr022 = document.getElementById('022').value;
      var clr025 = document.getElementById('025').value;
      var clr026 = document.getElementById('026').value;
      var clr312 = document.getElementById('312').value;
      var clr030 = document.getElementById('030').value;
      var clr031 = document.getElementById('031').value;
      var clr032 = document.getElementById('032').value;
      var clr047 = document.getElementById('047').value;
      var clr034 = document.getElementById('034').value;
      var clr036 = document.getElementById('036').value;
      var clr035 = document.getElementById('035').value;
      var clr404 = document.getElementById('404').value;
      var clr040 = document.getElementById('040').value;
      var clr043 = document.getElementById('043').value;
      var clr042 = document.getElementById('042').value;
      var clr041 = document.getElementById('041').value;
      var clr045 = document.getElementById('045').value;
      var clr562 = document.getElementById('562').value;
      var clr518 = document.getElementById('518').value;
      var clr050 = document.getElementById('050').value;
      var clr065 = document.getElementById('065').value;
      var clr049 = document.getElementById('049').value;
      var clr086 = document.getElementById('086').value;
      var clr067 = document.getElementById('067').value;
      var clr057 = document.getElementById('057').value;
      var clr051 = document.getElementById('051').value;
      var clr098 = document.getElementById('098').value;
      var clr052 = document.getElementById('052').value;
      var clr084 = document.getElementById('084').value;
      var clr053 = document.getElementById('053').value;
      var clr056 = document.getElementById('056').value;
      var clr066 = document.getElementById('066').value;
      var clr054 = document.getElementById('054').value;
      var clr055 = document.getElementById('055').value;
      var clr060 = document.getElementById('060').value;
      var clr613 = document.getElementById('613').value;
      var clr061 = document.getElementById('061').value;
      var clr068 = document.getElementById('068').value;
      var clr062 = document.getElementById('062').value;
      var clr064 = document.getElementById('064').value;
      var clr063 = document.getElementById('063').value;
      var clr080 = document.getElementById('080').value;
      var clr083 = document.getElementById('083').value;
      var clr081 = document.getElementById('081').value;
      var clr082 = document.getElementById('082').value;
      var clr023 = document.getElementById('023').value;
      var clr070 = document.getElementById('070').value;
      var clr073 = document.getElementById('073').value;
      var clr071 = document.getElementById('071').value;
      var clr076 = document.getElementById('076').value;
      var clr074 = document.getElementById('074').value;
      var clr072 = document.getElementById('072').value;
      var clr090 = document.getElementById('090').value;
      var clr091 = document.getElementById('091').value;
      var clr092 = document.getElementById('092').value;

      var result = parseInt(clr000) + parseInt(clr010) + parseInt(clr020) + parseInt(clr019) + parseInt(clr021) + parseInt(clr022) + parseInt(clr025) + parseInt(clr026) + parseInt(clr312) + parseInt(clr030) + parseInt(clr031) + parseInt(clr032) + parseInt(clr047) + parseInt(clr034) + parseInt(clr036) + parseInt(clr035) + parseInt(clr404) + parseInt(clr040) + parseInt(clr043) + parseInt(clr042) + parseInt(clr041) + parseInt(clr045) + parseInt(clr562) + parseInt(clr518) + parseInt(clr050) + parseInt(clr065) + parseInt(clr049) + parseInt(clr086) + parseInt(clr067) + parseInt(clr057) + parseInt(clr051) + parseInt(clr098) + parseInt(clr052) + parseInt(clr084) + parseInt(clr053) + parseInt(clr056) + parseInt(clr066) + parseInt(clr054) + parseInt(clr055) + parseInt(clr060) + parseInt(clr613) + parseInt(clr061) + parseInt(clr068) + parseInt(clr062) + parseInt(clr064) + parseInt(clr063) + parseInt(clr080) + parseInt(clr083) + parseInt(clr081) + parseInt(clr082) + parseInt(clr023) + parseInt(clr070) + parseInt(clr073) + parseInt(clr071) + parseInt(clr076) + parseInt(clr074) + parseInt(clr072) + parseInt(clr090) + parseInt(clr091) + parseInt(clr092);
      if (!isNaN(result)) {
        document.getElementById('ttlQty').value = result;
      }
    }
  </script>
</head>

<body>

  <div class="container">
    <div class="header">
      <h3>Package Size</h3> 
      <div class="PackContainer">
        <div class="radioBtn">
          <label>
            <input type="radio" onclick="myFunction(this.value)" name="packSize" value="5">5 sheets</label>
          <label>

            <input type="radio" onclick="myFunction(this.value)" name="packSize" value="10">10 sheets</label>
          <label>
            <input type="radio" onclick="myFunction(this.value)" name="packSize" value="25">25 sheets</label>
          <label>
            <input type="radio" onclick="myFunction(this.value)" name="packSize" value="50">50 sheets</label>
        </div>
        <div class="5 box">$4.45</div>
        <div class="10 box">$8.40</div>
        <div class="25 box">$18.75</div>
        <div class="50 box">$27.50</div>
      </div>
    </div>
    <div class="main">
      <div class="counter">
        <input type="text" id="ttlQty" />of <span id="result"></span> remaining.</div>
      <h3>Colors</h3>
      <div class="colorDiv">
        <div class="colorBlock" style="background-color:#DCD9E0;">000 clear
          <input type="text" id="000" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#E8E9ED;">010 white
          <input type="text" id="010" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#FFAB00;">020
          <input type="text" id="020" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#E8A800;">019
          <input type="text" id="019" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#FEC600;">021
          <input type="text" id="021" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#F5CA01;">022
          <input type="text" id="022" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#F3E111;">025
          <input type="text" id="025" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#64000D;">026
          <input type="text" id="026" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#74000D;">312
          <input type="text" id="312" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#960816;">030
          <input type="text" id="030" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#B8000C;">031
          <input type="text" id="031" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#D10800;">032
          <input type="text" id="032" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#DA2F01;">047
          <input type="text" id="047" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#E44B00;">034
          <input type="text" id="034" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#EF6701;">036
          <input type="text" id="036" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#FF6E01;">035
          <input type="text" id="035" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#422871;">404
          <input type="text" id="404" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#5F2C65;">040
          <input type="text" id="040" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#785E9F;">043
          <input type="text" id="043" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#BC91BC;">042
          <input type="text" id="042" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#C92A6A;">041
          <input type="text" id="041" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#F385B6;">045
          <input type="text" id="045" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock dark" style="background-color:#141D3A;">562
          <input type="text" id="562" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock dark" style="background-color:#12143D;">518
          <input type="text" id="518" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock dark" style="background-color:#1C2E5C;">050
          <input type="text" id="050" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock dark" style="background-color:#10226A;">065
          <input type="text" id="065" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#142978;">049
          <input type="text" id="049" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#0F32AA;">086
          <input type="text" id="086" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#003979;">067
          <input type="text" id="067" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#013F8C;">057
          <input type="text" id="057" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#014584;">051
          <input type="text" id="051" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#014FA2;">098
          <input type="text" id="098" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#015CAB;">052
          <input type="text" id="052" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#0173BC;">084
          <input type="text" id="084" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#0187C4;">053
          <input type="text" id="053" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#3BA0D4;">056
          <input type="text" id="056" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#007F8E;">066
          <input type="text" id="066" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#009999;">054
          <input type="text" id="054" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#5BCAB7;">055
          <input type="text" id="055" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock dark" style="background-color:#013F28;">060
          <input type="text" id="060" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#005037;">613
          <input type="text" id="613" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#00784B;">061
          <input type="text" id="061" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#007843;">068
          <input type="text" id="068" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#00863F;">062
          <input type="text" id="062" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#1E9903;">064
          <input type="text" id="064" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#69A62D;">063
          <input type="text" id="063" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock dark" style="background-color:#442F1E;">080
          <input type="text" id="080" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#B3591D;">083
          <input type="text" id="083" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#AA885B;">081
          <input type="text" id="081" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#CFBF9E;">082
          <input type="text" id="082" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#EFD394;">023
          <input type="text" id="023" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock dark" style="background-color:#0E0E10;">070
          <input type="text" id="070" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#4C4C4C;">073
          <input type="text" id="073" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#747D7C;">071
          <input type="text" id="071" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#818588;">076
          <input type="text" id="076" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#8A8F8B;">074
          <input type="text" id="074" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#BFC1BE;">072
          <input type="text" id="072" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#696A6C;">090
          <input type="text" id="090" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#776233;">091
          <input type="text" id="091" value="0" onkeyup="sum();" />
          <br>
        </div>
        <div class="colorBlock" style="background-color:#6E401C;">092
          <input type="text" id="092" value="0" onkeyup="sum();" />
          <br>
        </div>
      </div>
      <script type="text/javascript">
        function hideshow(which) {
          if (!document.getElementById)
            return
          if (which.style.display == "none")
            which.style.display = "block"
          else
            which.style.display = "none"
        }
      </script>
    </div>
    <div class="footer">

      <script>
        function myFunction(packSize) {
          document.getElementById("result").innerHTML = packSize;
        }
        var rainbow = document.querySelector('.colorDiv');

        rainbow.addEventListener('keyup', function(event) {
          var count = document.getElementById('ttlQty').value;
          var quantity = document.getElementById('result').textContent;
          if (parseFloat(count) > parseFloat(quantity)) {
            document.getElementById('ttlQty').style.color = 'red';
          } else {
            document.getElementById('ttlQty').style.color = 'black';
          }
        }, false);
      </script>

      <div style="right:10px;"><strong>PACKAGE PRICE</strong>
        <br>
        <input name="TotlCost" type="text" id="TotalCost" style="border:1px solid #fff; text-align:right; font-size:38px; font-weight:bolder; color:#3FA9F5; background-color:#333;" value="$0.00" size="10" readonly/>
      </div>
      <!-- Quantity DIVS -->

    </div>


  </div>
</body>

</html>

关于javascript - 如果数字大于单选值的值，则更改样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40560809/

上一篇：javascript - 如何使用 html、css 和 js 将侧边栏和导航栏包含在一起

下一篇：javascript - 如果 JS 函数包含在 HTML 中，我如何在浏览器控制台中显示所有 JS 函数？

相关文章：

php - 如何设置特定图像不保存在缓存中

javascript - JS中.getAttribute和数据集的区别

javascript - 如何检查给定变量输入的小数点右移次数？

javascript - 如何根据文本内容自动调整聊天气泡元素的大小？

html - Div元素不会在CSS中换行

html - 特定 div 中的第二级菜单，左对齐

javascript - JQuery忽略表单元素

html - 在 body 中垂直居中一个div？

javascript - 使用 Jquery 增加输入名称数组索引

javascript - 使用 JavaScript 更改焦点上占位符文本的颜色

©2024 IT工具网  联系我们