Javascript不能在div下运行？ [英] Javascript not running under div?

问题描述

我有一个问题，Javascript（文件名为Javascript.js）不能用于我的php页面。这是我的JavaScript文件：

  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; 
} 
返回weekPrice; 
} 
函数getTotal（）
 {
 var weekTotalPrice = weekPrice（）; 
 document.querySelector（'input [type = hidden] [name = totalprice]'）。value = weekTotalPrice; 
 document.getElementsByClassName（totalPrice）[0] .innerHTML =+ weekTotalPrice; 
} 
  

为了将它连接到我的php页面，我在标签中添加了以下内容：

 < script type =text / javascriptsrc =Javascript.js/>< / script> 
  

这就是我使用函数的方法：

 < li> 7月8日 -  7月12日（$ 75 /小孩）< input type = checkbox name =campsessions []value =July8-July12onclick =getTotal ）id =includeweek1>< / li> 
< li> 7月15日 -  7月19日（$ 75 /孩子）< input type = checkbox name =campsessions []value =July15-July19onclick =getTotal（）id =includeweek2 >< /锂> 
< li> 7月22日 -  7月26日（$ 75 /小孩）< input type = checkbox name =campsessions []value =July22-July26onclick =getTotal（）id =includeweek3 >< /锂> 
< li> 7月29日 -  8月2日（$ 75 /小孩）< input type = checkbox name =campsessions []value =July29-August2onclick =getTotal（）id =includeweek4 >< /锂> 
< li> 8月6日 -  8月9日（$ 60 /小孩）< input type = checkbox name =campsessions []value =August6-August9onclick =getTotal（）id =includeweek5 >< /锂> 
< li> 8月12日 -  8月16日（$ 75 /小孩）< input type = checkbox name =campsessions []value =August12-August16onclick =getTotal（）id =includeweek6 >< /锂> 
< / ol> 
 
< label> < b取代;包括营后护理？ < / B>< /标签> < input type =checkboxname =campcareonclick =getTotal（）id =aftercampcare/> < br />< br /> 
< i> Camp Care营业时间从下午4点到6点提供，额外收费为2美元/小时。< / i>< br />< br /> 
 
总价：< div class =inline totalPrice> < / DIV> 
  

解决方案

问题出在这里，您有opacity：0 ，删除该行，它似乎工作。你可能需要捣乱一些其他的风格，但这就是为什么你没有看到它。

您可能不想这样做，因为它可能在其他地方使用。最简单的解决方法是将totalPricediv更改为跨度，这将解决问题，因为它不会匹配下面的CSS

  .content div {
 position：absolute; 
 top：0; 
剩下：0; 
底部：100％; 
 padding：10px 40px; 
 overflow：hidden; 
 z-index：1; 
 opacity：0; 
 -webkit-transition：全部为线性0.1s; 
 -moz-transition：全部为线性0.1s; 
 -o-transition：全部为线性0.1s; 
 -ms-transition：所有线性0.1s; 
转换：所有线性0.1s; 
 $ \\ b $ b  

更改为：

 总价：< span class =totalPrice> < /跨度> 
  

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>

解决方案

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>

这篇关于Javascript不能在div下运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！