其他js函数忽略了我的实时calc函数

时间:2018-11-04 06:19:27

标签: javascript php html

我在这里迷路了,尝试了一切。我的实时计算已完成到单独的js文件中,但是由于我开始使用引导程序模板,因此未执行该计算。我已经阅读了它,并尝试了其他方法,但是什么也没发生。

Php调用实时计算

 <!-- ======================== PHONE INSURANCE ======================== -->
          <select name="insurance" id='insurance' onChange="portInDatabase();">
            <option disabled >Select Insurance</option>
            <option value="None">None</option>
            <option value="7">Yes</option>
          </select><br>

          <!-- ======================== PHONE CASE ======================== -->
          <select name="case" id='case' onChange="portInDatabase()" onclick='portInDatabase()'>
            <option disabled >Select Phone Case</option>
            <option value="None">None</option>
            <option value="25">Regular</option>
            <option value="30">Wallet</option>
          </select><br>

          <!-- ======================== SCREEN PROTECTOR ======================== -->
          <select name="screen" id='screen' onChange="portInDatabase();">
            <option disabled >Select Screen Protector</option>
            <option value="None">No</option>
            <option value="15">Yes</option>
          </select><br>
          <!-- ======================== TOTAL FROM JS ======================== -->
          <div id='total'></div>

实时计算的Js(抱歉,长代码)

// Array for plan prices
var plan_prices = new Array();
plan_prices["None"]= 0;
plan_prices["35"]=35;
plan_prices["50"]=50;
plan_prices["60"]=60;

// Array for insurance where "None" is the id from the html and it is equivalent
// to value 0 and so on
  var insurance_phone = new Array();
  insurance_phone["None"]=0;
  insurance_phone["7"]=7;

//Array for phone case for price calculation
  var phone_case = new Array();
  phone_case["None"]=0;
  phone_case["25"] = 25;
  phone_case["30"] = 30;

//Array for screen protector
  var screen_protector = new Array();
  screen_protector["None"]=0;
  screen_protector["15"] = 15;

// function for getting the plan price from the dropList
  function getPlanPrice() {
    var planSelected = 0;
    var selectForm= document.forms["device"];
    var selectedDevice3=selectForm.elements["plan"];
    planSelected = plan_prices[selectedDevice3.value];
    return planSelected;
  }// end getPlanPrice

// function for getting the price when it is selected in the html dropList. This
// selection will single out the price we need for calculation.
  function getInsurancePrice() {
    var insuranceSelected = 0;
    var selectForm= document.forms["device"];
    var selectedDevice4=selectForm.elements["insurance"];
    insuranceSelected = insurance_phone[selectedDevice4.value];
    return insuranceSelected;
  }// end getInsurancePrice

  // Get the price for the selected option in the dropList to calculate.
  function getCasePrice() {
    var caseSelected = 0;
    var selectForm= document.forms["device"];
    var selectedDevice5=selectForm.elements["case"];
    caseSelected = phone_case[selectedDevice5.value];
    return caseSelected;
  }// getCasePrice

  // function to get the price for the screen.
  function getScreenPrice() {
    var screenSelected = 0;
    var selectForm= document.forms["device"];
    var selectedDevice6=selectForm.elements["screen"];
    screenSelected = screen_protector[selectedDevice6.value];
    return screenSelected;
  }// getScreenPrice

// This function splits the data in the database to calculate the price for the
// device when port in is selected or when upgrade is selected and then it also checks
// whether anything else is selected in the form and does the real time calculation and
// outputs the result.
function portInDatabase(){
  console.log("PortInDatabase started..")
  debugger;
  var price1, price2, price3, price4, price5, price6 = 0;
  var port = 0;
  var newAct = 0;
  var up = 0;
  var down = 0;
  var act= 25;  //Activation fee
  // if the selection is a number then execute this
  if(!isNaN(getPlanPrice())){
    price2= getPlanPrice();
  }
  if(!isNaN(getInsurancePrice())){
    price3= getInsurancePrice();
  }

  if(!isNaN(getCasePrice())){
    price4= getCasePrice();
  }
  if(!isNaN(getScreenPrice())){
    price5= getScreenPrice();
  }

  // This if statement is executed when Port is selected in the dropList and then
  // it splits the rows which is connected to the device accordingly and then checks
  // whether any of the other dropLists are selected so it can then calulate them and output it.
  debugger;
  if (document.getElementById('myport').selected == true){

   var selDev = document.getElementById('selectDevice').value;
   var port = selDev.split('#')[4];   // number of row in the database
   port= parseFloat(port) +parseFloat(selDev.split('#')[1]*0.092)+price2 + price3 + price4 +price5+act;
   port = port.toFixed(2);  // rounds the decimal to 2
   debugger;
   document.getElementById('total').innerHTML= "Your Total: " +port;
   }//end if

   // for new Activation selection
   else if(document.getElementById('srp').selected == true){
     var selDev = document.getElementById('selectDevice').value;
     var newAct = selDev.split('#')[1];
     newAct= parseFloat(newAct) +parseFloat(selDev.split('#')[1]*0.092)+price2 + price3 + price4 +price5+act;
     newAct = newAct.toFixed(2);
  document.getElementById('total').innerHTML= "Your Total: " +newAct;
   }//elseif

   //for upgrade selection
   else if(document.getElementById('upgrade').selected == true){
     var selDev = document.getElementById('selectDevice').value;
     var up = selDev.split('#')[2];
     up = parseFloat(up) +parseFloat(selDev.split('#')[1]*0.092)+price2 + price3 + price4 +price5+act;
     up = up.toFixed(2);
     document.getElementById('total').innerHTML= "Your Total: " +up;
   }//2nd elseif

   //for down selection
   else if(document.getElementById('down').selected == true){
     var selDev= document.getElementById('selectDevice').value;
     var down= selDev.split('#')[6];
     down = parseFloat(port) +parseFloat(selDev.split('#')[1]*0.092)+price2 + price3 + price4 +price5+act;
     down = down.toFixed(2);
     document.getElementsById('total').innerHTML= "Your Total: " +down;
   }//end 3rd elseif
   else{
     return false;
   }//end else

  }// end portInDatabase

阻止实时计算的样式JS

    var CuteSelect = CuteSelect || {};
    FIRSTLOAD = true;
    SOMETHINGOPEN = false;

    CuteSelect.tools = {
        canRun: function() {
        var myNav = navigator.userAgent.toLowerCase();
        var browser = (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;

        if(browser) {
                return (browser > 8) ? true : false;
            } else { return true; }
        },
        uniqid: function() {
            var n= Math.floor(Math.random()*11);
            var k = Math.floor(Math.random()* 1000000);
            var m = String.fromCharCode(n)+k;
            return m;
        },
        hideEverything: function() {
            if(SOMETHINGOPEN) {
                SOMETHINGOPEN = false;
                targetThis = false;
                var cells = document.getElementsByTagName('div');
                for (var i = 0; i < cells.length; i++) {
                    if(cells[i].hasAttribute('data-cuteselect-options')) {
                        var parent = cells[i].parentNode;
                        cells[i].style.opacity = '0';
                        cells[i].style.display = 'none';
                    }
                }
            }
        },
        getStyle: function() {
            var css = '';
            var stylesheets = document.styleSheets;
            var css = '';
            for(s = 0; s < stylesheets.length; s++) {
                var classes = stylesheets[s].rules || stylesheets[s].cssRules;
                for (var x = 0; x < classes.length; x++) {
                    if(classes[x].selectorText != undefined) {
                        var selectPosition = classes[x].selectorText.indexOf('select');
                        var optionPosition = classes[x].selectorText.indexOf('option');
                        var selectChar = classes[x].selectorText.charAt(selectPosition - 1);
                        var optionChar = classes[x].selectorText.charAt(optionPosition - 1);
                        if(selectPosition >= 0 && optionPosition >= 0 && (selectChar == '' || selectChar == '}' || selectChar == ' ') && (optionChar == '' || optionChar == '}' || optionChar == ' ')) {
                            text = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
                            css += text.replace(/\boption\b/g, '[data-cuteselect-value]').replace(/\bselect\b/g, '[data-cuteselect-item]');
                            continue;
                        }
                        if(selectPosition >= 0) {
                            var character = classes[x].selectorText.charAt(selectPosition - 1);
                            if(character == '' || character == '}' || character == ' ') {
                                text = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
                                css += text.replace(/\bselect\b/g, '[data-cuteselect-item]');
                            }
                        }
                        if(optionPosition >= 0) {
                            var character = classes[x].selectorText.charAt(optionPosition - 1);
                            if(character == '' || character == '}' || character == ' ') {
                                text = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;
                                css += text.replace(/\boption\b/g, '[data-cuteselect-value]');

                            }
                        }
                    }
                }
            }

            return css;
        },

        createSelect: function(item) {


            // Create custom select
            var node = document.createElement("div");
            if(item.hasAttribute('id')) { // Catch ID
                node.setAttribute('id', item.getAttribute('id'));
                item.removeAttribute('id');
            }
        if(item.hasAttribute('class')) { // Catch Class
                node.setAttribute('class', item.getAttribute('class'));
                item.removeAttribute('class');
            }

            // Hide select
            item.style.display = 'none';

            // Get Default value (caption)
            var caption = null;

            var cells = item.getElementsByTagName('option');
            for (var i = 0; i < cells.length; i++) {
                caption = cells[0].innerHTML;

                if(cells[i].hasAttribute('selected')) {
                    caption = cells[i].innerHTML;

                    break;
                }
            }

            // Get select options
            var options = '<div data-cuteselect-title>' + caption + '</div><div data-cuteselect-options><div data-cuteselect-options-container>';
            var cells = item.getElementsByTagName('option');
            for (var i = 0; i < cells.length; i++) {
                if(cells[i].hasAttribute('disabled')) { continue; }
                if(cells[i].hasAttribute('class')) { var optionStyle = ' class="' + cells[i].getAttribute('class') + '"'; } else { var optionStyle = ''; }
                if(cells[i].hasAttribute('id')) { var optionId = ' id="' + cells[i].getAttribute('id') + '"'; } else { var optionId = ''; }
                if(cells[i].hasAttribute('selected')) { options += '<div data-cuteselect-value="' + cells[i].value + '" data-cuteselect-selected="true"' + optionStyle + optionId + '>' + cells[i].innerHTML + '</div>'; }
                else { options += '<div data-cuteselect-value="' + cells[i].value + '"' + optionStyle + optionId + '>' + cells[i].innerHTML + '</div>'; }
            }
            options += '</div></div>';

            // New select customization
            node.innerHTML = caption;
            node.setAttribute('data-cuteselect-item', CuteSelect.tools.uniqid());
            node.innerHTML = options; // Display options
            item.setAttribute('data-cuteselect-target', node.getAttribute('data-cuteselect-item'));
            item.parentNode.insertBefore(node, item.nextSibling);

            // Hide all options
            CuteSelect.tools.hideEverything();
        },
      //settings of the options, their position and all
        show: function(item) {
            if(item.parentNode.hasAttribute('data-cuteselect-item')) { var source = item.parentNode.getAttribute('data-cuteselect-item'); }
            else { var source = item.getAttribute('data-cuteselect-item'); }
            var cells = document.getElementsByTagName('select');
            if(item.hasAttribute('data-cuteselect-title')) {
                item = item.parentNode;
                var cells = item.getElementsByTagName('div');
            }
            else { var cells = item.getElementsByTagName('div');  }
            for (var i = 0; i < cells.length; i++) {
                if(cells[i].hasAttribute('data-cuteselect-options')) {
                    targetItem = cells[i];
                    cells[i].style.display = 'block';
                    setTimeout(function() { targetItem.style.opacity = '1'; }, 10);
                    cells[i].style.position = 'absolute';
                    cells[i].style.left = item.offsetLeft + 'px';
                    cells[i].style.top = (item.offsetTop + item.offsetHeight) + 'px';
                }
            }

            item.focus();

            SOMETHINGOPEN = item.getAttribute('data-cuteselect-item');
        },
        selectOption: function(item) {
            var label = item.innerHTML;
            var value = item.getAttribute('data-cuteselect-value');
            var parent = item.parentNode.parentNode.parentNode;
            var target = parent.getAttribute('data-cuteselect-item');
            var cells = parent.getElementsByTagName('div');
            for (var i = 0; i < cells.length; i++) {
                if(cells[i].hasAttribute('data-cuteselect-title')) { cells[i].innerHTML = label; }
            }

            // Real select
            var cells = document.getElementsByTagName('select');
            for (var i = 0; i < cells.length; i++) {
                var source = cells[i].getAttribute('data-cuteselect-target');
                if(source == target) { cells[i].value = value; }
            }
            //CuteSelect.tools.hideEverything();
        },
        writeStyles: function() {
            toWrite = '<style type="text/css">' + CuteSelect.tools.getStyle() + ' [data-cuteselect-options] { opacity: 0; display: none; }</style>';
            document.write(toWrite);
        }
    };

      CuteSelect.event = {
        parse: function() {
          var cells = document.getElementsByTagName('select');
          for (var i = 0; i < cells.length; i++) { CuteSelect.tools.createSelect(cells[i]); }
        },
        listen: function() {
          document.onkeydown = function(evt) {
            evt = evt || window.event;
            if (evt.keyCode == 27) { CuteSelect.tools.hideEverything(); }
          };
          document.onclick = function(event) {
            FIRSTLOAD = false;
            if((!event.target.getAttribute('data-cuteselect-item') && !event.target.getAttribute('data-cuteselect-value') && !event.target.hasAttribute('data-cuteselect-title')) || ((event.target.hasAttribute('data-cuteselect-item') || event.target.hasAttribute('data-cuteselect-title')) && SOMETHINGOPEN)) {
              CuteSelect.tools.hideEverything();
              return;
            }
            //when selected the option dropdown list closes
            var action = event.target;
            if(event.target.getAttribute('data-cuteselect-value')) {
              CuteSelect.tools.selectOption(action);
              CuteSelect.tools.hideEverything();
            }
            else { CuteSelect.tools.show(action); }
            return false;
          }
        },
        manage: function() {
          if(CuteSelect.tools.canRun()) { // IE Compatibility
            CuteSelect.event.parse();
            CuteSelect.event.listen();
            CuteSelect.tools.writeStyles();

          }
        }


      };


  // document.onload(function() {
    CuteSelect.event.manage();
  // });

我不想发布这个长问题,但我迷路了,不知道该怎么办。谢谢,抱歉。

0 个答案:

没有答案