JSFiddle 코드가 작동하고 정적 파일 만이

-2

이 아닙니다. 다음 코드는 "프리미엄 등의 사양"이 될 때까지 완벽하게 작동하며 아무 것도 표시하지 않습니다. 그러나이 jsfiddle : http://jsfiddle.net/ej4j8/3/ 코드가 제대로 작동하고 "프리미엄 사양 등"아래에 0이 표시됩니다. (다른 오류는 내가 처리 할 필요가있다.) 누군가 JSfiddle이이 작업을하기 위해 사용하는 워퍼 (warper)가 무엇인지 말해 줄 수 있다면 좋을 것이다. 분명히 같은 코드입니다 손실에서 메신저.JSFiddle 코드가 작동하고 정적 파일 만이

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"  type="text/javascript"></script> 
<style type="text/css"> 

/*custom font*/ 
@import url(http://fonts.googleapis.com/css?family=Montserrat); 

/*basic reset*/ 
* {margin: 0; padding: 0;} 

html { 
    height: 100%; 
    /*Image only BG fallback*/ 
    background-color:#FFC926; 
    /*background = gradient + image pattern combo*/ 
    background: 
     linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), ; 
} 

body { 
    font-family: montserrat, arial, verdana; 
} 
/*form styles*/ 
#msform { 
    width: 90%; 
    margin: 50px auto; 
    text-align: center; 
    position: relative; 
} 
#msform fieldset { 
    background: white; 
    border: 0 none; 
    border-radius: 3px; 
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); 
    padding: 20px 30px; 

    box-sizing: border-box; 
    width: 80%; 
    margin: 0 10%; 

    /*stacking fieldsets above each other*/ 
    position: absolute; 
} 
/*Hide all except first fieldset*/ 
#msform fieldset:not(:first-of-type) { 
    display: none; 
} 
/*inputs*/ 
#msform input, #msform textarea { 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    margin-bottom: 10px; 
    width: 80%; 
    box-sizing: border-box; 
    font-family: montserrat; 
    color: #2C3E50; 
    font-size: 13px; 
} 
/*buttons*/ 
#msform .action-button { 
    width: 100px; 
    background: #27AE60; 
    font-weight: bold; 
    color: white; 
    border: 0 none; 
    border-radius: 1px; 
    cursor: pointer; 
    padding: 10px 5px; 
    margin: 10px 5px; 
} 
#msform .action-button:hover, #msform .action-button:focus { 
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; 
} 
/*headings*/ 
.fs-title { 
    font-size: 15px; 
    text-transform: uppercase; 
    color: #2C3E50; 
    margin-bottom: 10px; 
} 
.fs-subtitle { 
    font-weight: normal; 
    font-size: 13px; 
    color: #666; 
    margin-bottom: 20px; 
} 
/*progressbar*/ 
#progressbar { 
    margin:10% 0% 5% 15%; 
    width:100%; 
    overflow: hidden; 
    /*CSS counters to number the steps*/ 
    counter-reset: step; 
} 
#progressbar li { 
    list-style-type: none; 
    color: white; 
    text-transform: uppercase; 
    font-size: 9px; 
    width: 10.33%; 
    float:left; 

    position: relative; 
} 
#progressbar li:before { 
    content: counter(step); 
    counter-increment: step; 
    width: 20px; 
    line-height: 20px; 
    display: block; 
    font-size: 10px; 
    color: #333; 
    background: white; 
    border-radius: 3px; 
    margin: 0 auto 5px auto; 
} 
/*progressbar connectors*/ 
#progressbar li:after { 
    content: ''; 
    width: 100%; 
    height: 2px; 
    background: white; 
    position: absolute; 
    left: -50%; 
    top: 9px; 
    z-index: -1; /*put it behind the numbers*/ 
} 
#progressbar li:first-child:after { 
    /*connector not needed before the first step*/ 
    content: none; 
} 
/*marking active/completed steps green*/ 
/*The number of the step and the connector before it = green*/ 
#progressbar li.active:before, #progressbar li.active:after{ 
    background: #27AE60; 
    color: white; 
} 
</style> 
</head> 

<body> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
function calculateTotal() 
{ 

    var boilerPrice = getBoilerSizePrice() + getBedroomSizePrice() + getBathroomSizePrice() + getTankSizePrice() ; 

    //display the result 
     var divobj = document.getElementById('totalPrice'); 
    divobj.style.display='block'; 
    divobj.innerHTML = "total price £"+boilerPrice; 

    var divobj2 = document.getElementById('premPrice'); 
    divobj2.style.display='block'; 
    divobj2.innerHTML = "Premium price £"+((boilerPrice/100)*120); 

} 



var current_fs, next_fs, previous_fs; //fieldsets 
var left, opacity, scale; //fieldset properties which we will animate 
var animating; //flag to prevent quick multi-click glitches 

$(".next").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    next_fs = $(this).parent().next(); 

    //activate next step on progressbar using the index of next_fs 
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 

    //show the next fieldset 
    next_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale current_fs down to 80% 
      scale = 1 - (1 - now) * 0.2; 
      //2. bring next_fs from the right(50%) 
      left = (now * 50)+"%"; 
      //3. increase opacity of next_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({'transform': 'scale('+scale+')'}); 
      next_fs.css({'left': left, 'opacity': opacity}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".previous").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    previous_fs = $(this).parent().prev(); 

    //de-activate current step on progressbar 
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 

    //show the previous fieldset 
    previous_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale previous_fs from 80% to 100% 
      scale = 0.8 + (1 - now) * 0.2; 
      //2. take current_fs to the right(50%) - from 0% 
      left = ((1-now) * 50)+"%"; 
      //3. increase opacity of previous_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({'left': left}); 
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".submit").click(function(){ 
    return false; 
}) 





//Property Type array 

var house_prices = new Array(); 
house_prices["Semi"]=1029; 
house_prices["Detatched"]=1290; 
house_prices["Terrace"]=1100; 
house_prices["Flat"]=900; 

function getBoilerSizePrice() 
{ 
    var boilerSizePrice=0; 

    var theForm = document.forms["msform"]; 

    var selectedBoiler = theForm.elements["house"]; 

    for(var i = 0; i < selectedBoiler.length; i++) 
    { 
     //if the radio button is checked 
     if(selectedBoiler[i].checked) 
     {   
      boilerSizePrice = house_prices[selectedBoiler[i].value]; 

      break; 
     } 
    } 

    return boilerSizePrice; 
} 




var tank_prices = new Array(); 
tank_prices["Yes"]=500; 
tank_prices["YBR"]=890; 
tank_prices["No"]=0; 


function getTankSizePrice() 
{ 
    var tankSizePrice=0; 

    var theForm = document.forms["msform"]; 

    var selectedBoiler = theForm.elements["tank"]; 

    for(var i = 0; i < selectedBoiler.length; i++) 
    { 
     //if the radio button is checked 
     if(selectedBoiler[i].checked) 
     {   
      tankSizePrice = tank_prices[selectedBoiler[i].value]; 

      break; 
     } 
    } 

    return tankSizePrice; 
} 

//bedroom number array 

var bedroom_prices= new Array(); 
bedroom_prices["Beds1"]=89; 
bedroom_prices["Beds2"]=94; 
bedroom_prices["Beds3"]=112; 
bedroom_prices["Beds4"]=145; 
bedroom_prices["Beds5"]=169; 
bedroom_prices["Beds6"]=178; 



    function getBedroomSizePrice() 
{ 
    var bedroomSizePrice=0; 

    var theForm = document.forms["msform"]; 

    var selectedBoiler = theForm.elements["bedroom"]; 

    for(var i = 0; i < selectedBoiler.length; i++) 
    { 
     //if the radio button is checked 
     if(selectedBoiler[i].checked) 
     {   
      bedroomSizePrice = bedroom_prices[selectedBoiler[i].value]; 

      break; 
     } 
    } 

    return bedroomSizePrice; 
} 

    //bathroom number array 
var bathroom_prices = new Array(); 
bathroom_prices["One"]=119; 
bathroom_prices["Two"]=129; 
bathroom_prices["Three"]=140; 



function getBathroomSizePrice() 
{ 
    var bathroomSizePrice=0; 

    var theForm = document.forms["msform"]; 

    var selectedBoiler = theForm.elements["bathroom"]; 

    for(var i = 0; i < selectedBoiler.length; i++) 
    { 
     //if the radio button is checked 
     if(selectedBoiler[i].checked) 
     {   
      bathroomSizePrice = bathroom_prices[selectedBoiler[i].value]; 

      break; 
     } 
    } 

    return bathroomSizePrice; 
} 






/* ellement for hiding classes 
$(".").hide(); 
*/ 

}); 

</script> 

<form id="msform"> 
    <!-- progressbar --> 
    <ul id="progressbar"> 
     <li class="active"></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    <!-- fieldsets --> 
    <fieldset> 
     <h2 class="fs-title">Getting A Quote Is Easy</h2> 
     <h3 class="fs-subtitle">We'll give you a quote in a few easy steps</h3> <br/> 
<p>Just tell us which options are most similar to your home</p> 
     <br/>   

     <input type="button" name="next" class="next action-button" value="Next" /> 
    </fieldset> 
    <fieldset> 
     <h2 class="fs-title">What Type Of Home Do You Have</h2> 
     <h3 class="fs-subtitle"></h3> 

     <label >Type Of Property</label><br/> 
       <label class='next action-button'><input type="button" name="house" value="Semi" onclick="calculateTotal()" /></label><br/> 
       <label class='next action-button'><input type="button" name="house" value="Detatched" onclick="calculateTotal()" /></label><br/> 
       <label class='next action-button'><input type="button" name="house" value="Terrace" onclick="calculateTotal()" /></label><br/> 
       <label class='next action-button'><input type="button" name="house" value="Flat" onclick="calculateTotal()" /></label><br/> 
       <br/> 
    </fieldset> 
    <fieldset> 
     <h2 class="fs-title">How Many Bedrooms Do You Have</h2> 
     <h3 class="fs-subtitle"></h3> 
     <label >Number of Bedrooms</label> 
     <br/> 
     <label class='next action-button'><input type="button" name="bedroom" value="Bed1" onclick="calculateTotal()" />1</label><br/> 
       <label class='next action-button'><input type="button" name="bedroom" value="Beds2" onclick="calculateTotal()" />2</label><br/> 
       <label class='next action-button'><input type="button" name="bedroom" value="Beds3" onclick="calculateTotal()" />3</label><br/> 
       <label class='next action-button'><input type="button" name="bedroom" value="Beds4" onclick="calculateTotal()" />4</label><br/> 
       <label class='next action-button'><input type="button" name="bedroom" value="Beds5" onclick="calculateTotal()" />5</label><br/> 
       <label class='next action-button'><input type="button" name="bedroom" value="Beds6" onclick="calculateTotal()" />6</label><br/> 

    </fieldset> 
    <fieldset> 
     <h2 class="fs-title">How Many Bathrooms Do You Have</h2> 
     <h3 class="fs-subtitle"></h3> 

     <label >Number of Bathrooms</label> 
     <br/> 
     <label class='next action-button'><input type="button" name="bathroom" value="One" onclick="calculateTotal()" />1</label><br/> 
       <label class='next action-button'><input type="button" name="bathroom" value="Two" onclick="calculateTotal()" />2</label><br/> 
       <label class='next action-button'><input type="button" name="bathroom" value="Three" onclick="calculateTotal()" />3</label><br/>   


    </fieldset> 
<fieldset> 
     <h2 class="fs-title">Do You Have A Cylinder</h2> 
     <h3 class="fs-subtitle"></h3> 

    <label >Do You Have A Cylinder Tank</label> 
    <br/> 
       <label class='next action-button'><input type="button" name="tank" value="Yes" onclick="calculateTotal()" />Yes</label><br/> 
       <label class='next action-button'><input type="button" name="tank" value="YBR" onclick="calculateTotal()" />Yes (but needs removing)</label><br/> 
       <label class='next action-button'><input type="button" name="tank" value="No" onclick="calculateTotal()" />No</label><br/> 
       <br/> 
    </fieldset> 
<fieldset> 
     <h2 class="fs-title">Packages Available</h2> 
     <h3 class="fs-subtitle"></h3> 

    <p>standard and premium system specs</p> 
    <br/> 
       <div id="totalPrice"></div> 
       <br/> 
       <div id="premPrice"></div> 

     <input type="button" name="next" class="next action-button" value="Next" /> 
    </fieldset> 
    <fieldset> 
     <h2 class="fs-title">Enter your details to a get a free survey</h2> 
     <h3 class="fs-subtitle"></h3> 
     <input type="text" name="fname" placeholder="First Name" /> 
     <input type="text" name="lname" placeholder="Last Name" /> 
     <input type="text" name="phone" placeholder="Phone" /> 
     <input type="text" name="email" placeholder="email" /> 
     <textarea name="address" placeholder="Address"></textarea> 
     <input type="button" name="previous" class="previous action-button" value="Previous" /> 
     <input type="submit" name="submit" class="submit action-button" value="Submit" /> 
    </fieldset> 
</form> 
</body> 
</html>

출처

2014-05-20 user3648040

콘솔에 오류가 있는지 확인 했습니까? –

코드의 양을 줄임으로써 문제를 좁힐 수도 있습니다. – j08691

여기서는 유용하지 않은 준비 처리기 안에 메서드를 정의하기 때문에 범위 문제입니다. 전역 범위에 있어야하는 메소드가 아니라 준비된 핸들러에서 이벤트 바인딩을 랩핑하십시오. 또는 준비 처리기를 제거하고 ''닫는 태그 앞에 모든 스크립트를 설정하십시오. 즉,이 질문을 게시하기 전에 콘솔을 확인했다면 직접 수정해야합니다. –

Uncaught ReferenceError: calculateTotal is not defined

당신은 당신의 HTML에서 함수를 호출하고, 그러나 전역 범위에 있지 않습니다.

예 : 여기

... 
<input type="button" name="house" value="Semi" onclick="calculateTotal()" /> 
...

당신이 calculateTotal()를 호출하고 있지만이 기능은이 $(document).ready() 외부에 도달 할 수없는 의미 당신의 $(document).ready() 기능에 싸여 :

$(document).ready(function() { ... function calculateTotal() {} ... }

작동하려면이 종류의 기능을 정의해야합니다. 중$(document).ready :

function calculateTotal() {} $(document).ready(function() { ... }

출처

2014-05-20 16:00:18 zessx

JSFiddle 코드가 작동하고 정적 파일 만이

답변

관련 문제