javascript是否无法在div下运行？

Question

I'm having a problem where the Javascript (file called Javascript.js) isn't working with my php page. Here's my javascript file:

function weekPrice()
{
    var weekPrice=0;
    var theForm = document.forms["paymentform"];
    var includeWeek1 = theForm.elements["includeweek1"];
    var includeWeek2 = theForm.elements["includeweek2"];
    var includeWeek3 = theForm.elements["includeweek3"];
    var includeWeek4 = theForm.elements["includeweek4"];
    var includeWeek5 = theForm.elements["includeweek5"];
    var includeWeek6 = theForm.elements["includeweek6"];
    var afterCampCare = theForm.elements["aftercampcare"];


    if(includeWeek1.checked==true)
    {
        weekPrice= weekPrice + 75;
    }
    if (includeWeek2.checked==true)
    {
        weekPrice= weekPrice + 75;
    }
    if (includeWeek3.checked==true)
    {
        weekPrice= weekPrice + 75;
    }
    if (includeWeek4.checked==true)
    {
        weekPrice= weekPrice + 75;
    }
    if (includeWeek5.checked==true)
    {
        weekPrice= weekPrice + 60;
    }
    if (includeWeek6.checked==true)
    {
        weekPrice= weekPrice + 75;
    }
    if (afterCampCare.checked==true)
    {
        weekPrice= weekPrice + 2;
    }
    return weekPrice;
}
function getTotal()
{
var weekTotalPrice = weekPrice(); 
document.querySelector('input[type=hidden][name=totalprice]').value = weekTotalPrice;
document.getElementsByClassName("totalPrice")[0].innerHTML = "" + weekTotalPrice;
}

To connect it to my php page, I added the following to my tags:

<script type="text/javascript" src="Javascript.js"/></script>

This is how I use the function:

<li>July 8 - July 12 ($75/child)<input type=checkbox name="campsessions[]" value="July8-July12" onclick="getTotal()" id="includeweek1"></li>
   <li>July 15 - July 19 ($75/child)<input type=checkbox name="campsessions[]" value="July15-July19" onclick="getTotal()" id="includeweek2"></li>
   <li>July 22 - July 26 ($75/child)<input type=checkbox name="campsessions[]" value="July22-July26" onclick="getTotal()" id="includeweek3"></li>
   <li>July 29 - August 2 ($75/child)<input type=checkbox name="campsessions[]" value="July29-August2" onclick="getTotal()" id="includeweek4"></li>
   <li>August 6 - August 9 ($60/child)<input type=checkbox name="campsessions[]" value="August6-August9" onclick="getTotal()" id="includeweek5"></li>
  <li>August 12 - August 16 ($75/child)<input type=checkbox name="campsessions[]" value="August12-August16" onclick="getTotal()" id="includeweek6"></li>
   </ol>

   <label> <b> Include After Camp Care? </b></label> <input type="checkbox" name= "campcare" onclick="getTotal()" id="aftercampcare" /> <br /><br />
   <i> After Camp Care is available from 4pm-6pm for an additional charge of $2/hr.</i><br /><br />

      Total Price:<div class="inline totalPrice"> </div>

Answer 1

the problem lays here, you have "opacity: 0", delete that line and it appears to work. You may need to mess with some other styles, but thats why you're not seeing it.

You may not want to do that though because it is probably used somewhere else. the easiest fix though is to change your "totalPrice" div to a span, that will fix the problem because it wont match the below CSS

.content div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 100%;
    padding: 10px 40px;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    -o-transition: all linear 0.1s;
    -ms-transition: all linear 0.1s;
    transition: all linear 0.1s;
}\

change it to this:

Total Price:<span class="totalPrice"> </span>