javascript - Drupal block - 两个独立工作的 javascript，因为 block 放在同一页面上时不起作用

Question

我的第一个脚本终于在 drupal 站点上作为 block 独立工作。问题是，我需要它们在同一页面上并排工作。当我尝试这个时，只有其中一个有效。已四处搜寻以尝试找到解决方案 - 所有变量和元素都是唯一的，但似乎仍然存在冲突。代码如下:

block 1 代码:

    <script type="text/javascript">
 (function(){
    "use strict";
    window.getRisk = function()
{
    var size = window.document.getElementById('An_Size').value;
    var location = window.document.getElementById('locate').value;
    var ysah = window.document.getElementById('yessah');
    var nsah = window.document.getElementById('nosah');

    var x=size;
    var y=location;
        var z=ysah.checked?"yes":"no";

     if( x==0       ) output(" -- / --")
     if( x>0&& x<7      && y=="ant" && z=="no"  ) output(" 1 /0 ")
     if( x>=7&& x<12    && y=="ant" && z=="no"  ) output(" 0.9948 /2.6 ")
     if( x>=12&&x<25    && y=="ant" && z=="no"  ) output(" 0.971 /14.5 ")
     if( x>=25  && y=="ant" && z=="no"  ) output(" 0.92 /40 ")
     if( x>0&& x<7          && y=="post"    && z=="no"  ) output(" 0.995 /2.5 ")
     if( x>=7&& x<12    && y=="post"    && z=="no"  ) output(" 0.971 /14.5 ")
     if( x>=12&&x<25    && y=="post"    && z=="no"  ) output(" 0.9632 /18.4 ")
     if( x>=25  && y=="post"    && z=="no"  ) output(" 0.9 /50 ")
     if( x>0&& x<7          && y=="int"     && z=="no"  ) output(" 1 /0 ")
     if( x>=7&& x<12    && y=="int"     && z=="no"  ) output(" 1 /0 ")
     if( x>=12&&x<25    && y=="int"     && z=="no"  ) output(" 0.994 /3 ")
     if( x>=25  && y=="int"     && z=="no"  ) output(" 0.9872 /6.4 ")
     if( x>0&& x<7      && y=="ant" && z=="yes"     ) output(" 0.997 /1.5 ")
     if( x>=7&& x<12    && y=="ant" && z=="yes" ) output(" 0.9948 /2.6 ")
     if( x>=12&&x<25    && y=="ant" && z=="yes"     ) output(" 0.971 /14.5 ")
     if( x>=25  && y=="ant" && z=="yes"     ) output(" 0.92 /40 ")
     if( x>0&& x<7      && y=="post"    && z=="yes"     ) output(" 0.9932 /3.4 ")
     if( x>=7&& x<12    && y=="post"    && z=="yes"     ) output(" 0.971 /14.5 ")
     if( x>=12&&x<25    && y=="post"    && z=="yes"     ) output(" 0.9632 /18.4 ")
     if( x>=25  && y=="post"    && z=="yes"     ) output(" 0.9 /50")
     if( x>0&& x<7          && y=="int"     && z=="yes"     ) output(" 1 /0 ")
     if( x>7&& x<12     && y=="int"     && z=="yes"     ) output(" 1 /0 ")
     if( x>=12&&x<25    && y=="int"     && z=="yes"     ) output(" 0.994 /3 ")
     if( x>=25  && y=="int"     && z=="yes"     ) output(" 0.9872 /6.4 ")

};

function output(str)
{
    var arr = str.split("/");
    var one_yr_risk = parseFloat(arr[0]);
    var life_expectancy = parseFloat(window.document.getElementById('life_expectancy').value);
    var cum_risk="--";
    var five_yr_risk="--"
    {
        five_yr_risk = arr[1];
        cum_risk = Math.round(((1-Math.pow((one_yr_risk), life_expectancy))*100)*10)/10;
    }
    window.document.getElementById('r2').value=five_yr_risk;    
    if(life_expectancy<10)
        cum_risk="--";

    if(cum_risk===0)
        cum_risk="0*";

    window.document.getElementById('r1').value=cum_risk;
    }
}());

      </script>

     <img alt="" src="/sites/default/files/COW.gif" style="width: 250px; height: 284px; border-width: 0px; border-style: solid; margin: 0px;" />
     <form action="" id="riskform" onSubmit="return false;">
     <fieldset>
     <label for="locate">Location</label>
     <select id="locate" name='locate'
     onchange="getRisk()">
    <option value="ant">Anterior circulation</option>
    <option value="post">Posterior circulation (incl. PCom)</option>
    <option value="int">Intracavernous</option>

    </select>
    <br>
    <br>
    <p>
    <label class="inlinelabel" for='includeinscription'>
    Size(mm)</label>
   <input type="text"  id="An_Size" size=7 onKeyUp="getRisk()"
   name="size" value="0"  />
   </p>
   <label >Previous SAH?</label>
   <input type="radio"  name="prevsah" value="yessah" id="yessah"
    onclick="getRisk()" />
    Yes
    <input type="radio"  name="prevsah" value="nosah" id="nosah"
    onclick="getRisk()" />
    No
   <br>
   <br>    
   <label for="Five_Year">5 Year Rupture Risk (%)</label>
   <input type="text" name="val3" id="r2"><span id="result2"></span>
      <p>
   <p>
   <br>
   <label class="inlinelabel" for='includeinscription'>
    Estimated life expectancy (minimum 10 years)</label>
   <input type="text"  id="life_expectancy" size=7 onKeyUp="getRisk()"
   name="size" value="0"  />
   </p>

   <label for="One_Year">Cumulative Lifetime Rupture Risk (%)</label>
   <input type="text" name="val3" id="r1"><span id="result1"></span>

  <div id="Final_Risk"></div>

  </fieldset>
   </form>

block 2 代码:

      <script type="text/javascript">
(function(){
    "use strict";
     window.getRiskJp = function()
{
    var sizejp = window.document.getElementById('An_Size_Jp').value;
    var locationjp = window.document.getElementById('location_Jp').value;

    var a=sizejp;
    var b=locationjp;


         if( a<3        ) output(" -- / --")
         if( a>=3&& a<5     && b=="mca"     ) output(" 0.9977 /0.23 ")
         if( a>=5&& a<7     && b=="mca"     ) output(" 0.9969 /0.31 ")
         if( a>=7&& a<10    && b=="mca"     ) output(" 0.9844 /1.56")
         if( a>=10&& a<25   && b=="mca"     ) output(" 0.9589 /4.11 ")
         if( a>=25&& b=="mca"   ) output(" 0.8313 /16.87")
         if( a>=3&& a<5         && b=="aca"     ) output(" 0.991 /0.90 ")
         if( a>=5&& a<7     && b=="aca"     ) output(" 0.9925 /0.75 ")
         if( a>=7&& a<10    && b=="aca"     ) output(" 0.9803 /1.97")
         if( a>=10&& a<25   && b=="aca"     ) output(" 0.9476 /5.24 ")
         if( a>=25&& b=="aca"       ) output(" 0.6023 /39.77")
         if( a>=3&& a<5         && b=="ica"     ) output(" 0.9986 /0.14 ")
         if( a>=5&& a<7     && b=="ica"     ) output(" 1 /0 ")
         if( a>=7&&a<10     && b=="ica"     ) output(" 0.9881 /1.19")
         if( a>=10&&a<25    && b=="ica"     ) output(" 0.9893 /1.07 ")
         if( a>=25&& b=="ica"       ) output(" 0.8939 /10.61")
         if( a>=3&& a<5         && b=="icapcomm"        ) output(" 0.9986 /0.41 ")
         if( a>=5&& a<7     && b=="icapcomm"        ) output(" 1 /1 ")
         if( a>=7&&a<10     && b=="icapcomm"        ) output(" 0.9881 /3.19")
         if( a>=10&&a<25    && b=="icapcomm"        ) output(" 0.9893 /6.12 ")
         if( a>=25&& b=="icapcomm"      ) output(" 0 / around 100")
         if( a>=3&& a<5         && b=="bassca"      ) output(" 0.9977 /0.23 ")
         if( a>=5&& a<7     && b=="bassca"      ) output(" 0.9954 /0.46 ")
         if( a>=7&& a<10    && b=="bassca"      ) output(" 0.9903 /0.97 ")
         if( a>=10&& a<25   && b=="bassca"      ) output(" 0.9306 /6.94 ")
         if( a>=25&& b=="bassca"        ) output(" 0 /around 100")
         if( a>=3&& a<5         && b=="vert"        ) output(" 1 /0 ")
         if( a>=5&& a<7     && b=="vert"        ) output(" 1 /0 ")
         if( a>=7&& a<10    && b=="vert"        ) output(" 1 /0 ")
         if( a>=10&& a<25   && b=="vert"        ) output(" 0.9651 /3.49 ")
         if( a>=25&& b=="vert"      ) output(" 1 /0")
         if( a>=3&& a<5         && b=="other"       ) output(" 0.9922 /0.78 ")
         if( a>=5&& a<7     && b=="other"       ) output(" 0.9863 /1.37")
         if( a>=7&& a<10    && b=="other"       ) output(" 1 /0 ")
         if( a>=10&& a<25   && b=="other"       ) output(" 0.9719 /2.81 ")
         if( a>=25&& b=="other"     ) output(" 1 /0 ")

};

function output(str)
{
    var arrj = str.split("/");
    var one_br_risk = parseFloat(arrj[0]);
    var life_eapectancb = parseFloat(window.document.getElementById('life_eapectancb').value);
    var cum_riskj="--";
    var five_br_risk="--"
    {
        five_br_risk = arrj[1];
        cum_riskj = Math.round(((1-Math.pow((one_br_risk), life_eapectancb))*100)*10)/10;
    }
    window.document.getElementById('r2j').value=five_br_risk;   
    if(life_eapectancb<1)
        cum_riskj="--";

    if(cum_riskj===0)
        cum_riskj="0*";

    window.document.getElementById('r1j').value=cum_riskj;
    };
}());

       </script>

       <br>
       <form action="" id="riskformj" onSubmit="return false;">
       <fieldset>
       <label for="loc">Location</label>
       <select id="location_Jp" name='location_Jp'
       onchange="getRiskJp()">
       <option value="mca">Middle cerebral</option>
       <option value="aca">Anterior communicating</option>
       <option value="ica">Internal carotid</option>
       <option value="icapcomm">Internal carotid - posterior communicating</option>
       <option value="bassca">Basilar tip / superior cerebellar</option>
      <option value="vert">Vertebral / PICA / vertebrobasilar junction</option>
      <option value="other">Other location</option>

    </select>
    <br>
    <br>
    <p>
    <label class="inlinelabel" for='includeinscription'>
     Size(mm) (minimum 3mm)</label>
    <input type="text"  id="An_Size_Jp" size=7 onKeyUp="getRiskJp()"
    name="sizejp" value="0"  />   
   <p>
   <label class="inlinelabel" for='includeinscription'>
    Life expectancy (minimum 1 year)</label>
    <input type="text"  id="life_eapectancb" size=7 onKeyUp="getRiskJp()"
    name="sizejp" value="0"  />
    </p>
    <br>
    <p>
    <label for="Five_bear">1 year Rupture Risk (%)</label>
    <input type="text" name="val3jp" id="r2j"><span id="result2jp"></span>
      <p>
   <label for="One_bear">Cumulative Lifetime Rupture Risk (%)</label>
   <input type="text" name="val3jp" id="r1j"><span id="result1jp"></span>

    <div id="Final_Risk_Jp"></div>

  </fieldset>
  </form>

Answer 1

所以看来您没有在代码周围使用闭包，这很重要，因为不在闭包中的任何代码都是全局的。因此，现在两个 output 函数都存在......但浏览器使用哪个......这是任何人的猜测。闭包看起来像这样:

(function(){
 "use strict";
 window.getRisk = function(){ your code };
 function output() {your code };
 }());
(function(){
 "use strict";
 window.getRiskJp = function() { your code };
 function output(){ your code };
 }());

请注意，我正在定义需要在窗口对象的闭包外部可见的函数，否则它们对于回调将不可见。