0

我正在使用从 javascript 生成的代码编写一个简单的 html 表单。当我在 HTML 本身中运行代码时，它可以工作，但是当我将脚本放在单独的文件中时，它就不再工作了。我试图更改 onclick 事件，在 html 中生成代码，给我的元素一个类并添加一个 eventlistner，但没有任何效果。

这是我的 javascript 代码的一部分

    function print(){
        for (var j =0;j<3;j++){
            document.getElementById(idlist[j]).getElementsByTagName("UL")[0].innerHTML="";
            for (var i = 0; i<omschList.length;i++){
                var li = document.createElement("LI");
                if (j==0){
                    li.innerHTML = (idlist[j+3][i]+"<object align=\"right\" onclick=\"verwijder("+i+")\"><u>verwijder</u></object>");
                } else {
                    li.innerHTML = (idlist[j+3][i]);
                }
                document.getElementById(idlist[j]).getElementsByTagName("UL")[0].appendChild(li);
            }
        }
    }
     function verwijder(index){
        for (var i=0;i<3;i++){
            idlist[i+3].splice(index, 1);
        }
        print();
    }

编辑 完整的 javascript 代码

    (function ($) {

$( document ).ready( function() {

    /* VIEWPORT FIXES (http://timkadlec.com/2013/01/windows-phone-8-and-device-width/) */
    if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
      var msViewportStyle = document.createElement('style');
      msViewportStyle.appendChild(
        document.createTextNode(
          '@-ms-viewport{width:auto!important}'
        )
      );
      document.querySelector('head').appendChild(msViewportStyle);
    }


    document.getElementById("factuurFormSend").onclick = addLine;
      var omschList=[];
      var uurprList=[];
      var aantalList=[];
      var idlist=["omschrijving",
                  "uurprijs",
                  "aantal",
                  omschList,
                  uurprList,
                  aantalList]
    function addLine(){
        omschList.push(document.getElementById("formOmschrijving").value);
        uurprList.push(document.getElementById("formUurprijs").value);
        aantalList.push(document.getElementById("formUren").value);
        print()
    }

        /*print de lijnen verticaal uit*/
    function print(){
        for (var j =0;j<3;j++){
            document.getElementById(idlist[j]).getElementsByTagName("UL")[0].innerHTML="";
            for (var i = 0; i<omschList.length;i++){
                var li = document.createElement("LI");
                if (j==0){
                    li.innerHTML = (idlist[j+3][i]+"<object align=\"right\" onclick=\"verwijder("+i+")\"><u>verwijder</u></object>");
                } else {
                    li.innerHTML = (idlist[j+3][i]);
                }
                document.getElementById(idlist[j]).getElementsByTagName("UL")[0].appendChild(li);
            }
        }
        /*bereken lijntotaal*/
        document.getElementById("lijntotaal").getElementsByTagName("UL")[0].innerHTML=""
        var subtotaal=0;
        for (var i=0; i<uurprList.length;i++){
            var totaal = uurprList[i]*aantalList[i];
            subtotaal +=totaal;
            var li = document.createElement("LI");
            li.innerHTML=totaal;
            document.getElementById("lijntotaal").getElementsByTagName("UL")[0].appendChild(li);
        }
        /*subtotaal en btwtotaal wegschrijven*/
        document.getElementById("subtotaal").innerHTML=subtotaal;
        document.getElementById("btwbedrag").innerHTML=(subtotaal*0.21);
        document.getElementById("totaal").innerHTML=(subtotaal*1.21);
    }

    function verwijder(index){
        for (var i=0;i<3;i++){
            idlist[i+3].splice(index, 1);
        }
        print();
    }
} );

    })(jQuery);

以及有效的 HTML 代码

    <body>




    <div class="page">
    <header class="header">

</header>

<div role="main" class="cf">
  <div class="container" id="factuur">
    <section id="header">
      <div class="col-sm-8">
        <h1>Factuur</h1>
      </div>
      <div class="col-sm-8">Factuur nr. 1</div>
      <div class="col-sm-6">

        <div>Naam onderneming<br />
        Straatnaam nr<br />
      Postcode Gemeente<br />
    BE 0123 456 789</div>
      </div>
      <div class="col-sm-6">
        <div>Naam Klant<br />
        Straatnaam nr<br />
      Postcode Gemeente<br />
      BE 0123 456 789</div>
    </div>
    </section>
    <section id="content-header">
      <div class="col-sm-6">Omschrijving</div>
      <div class="col-sm-2">Uurprijs</div>
      <div class="col-sm-2">Aantal</div>
      <div class="col-sm-2">Totaal</div>
    </section>
    <section id="content">
      <div class="col-sm-6" id="omschrijving"><ul></ul></div>
      <div class="col-sm-2" id="uurprijs"><ul></ul></div>
      <div class="col-sm-2" id="aantal"><ul></ul></div>
      <div class="col-sm-2" id="lijntotaal"><ul></ul></div>
    </section>
    <section id="totalen">
      <div class="col-sm-offset-7 col-sm-3 text-right">Subtotaal</div>
      <div class="col-sm-2" id="subtotaal"></div>

      <div class="col-sm-offset-7 col-sm-3 text-right">BTW</div>
      <div class="col-sm-2" id="btw">21 %</div>

      <div class="col-sm-offset-7 col-sm-3 text-right">BTW Bedrag</div>
      <div class="col-sm-2" id="btwbedrag"></div>

      <div class="col-sm-offset-7 col-sm-3 text-right" style="border-top:1px solid black;">Totaal</div>
      <div class="col-sm-2" id="totaal" style="border-top:1px solid black;"></div>
    </section>
    <section id="factuurknop">
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#factuurModal">
        Voeg een factuurlijn toe
      </button>

    </section>
  </div>
</div>


</div>

<!-- Modal -->
<div class="modal fade" id="factuurModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Voeg een factuur item toe</h4>
      </div>
      <form>
      <div class="modal-body">
          <input style="width:30%" type="text" name="formOmschrijving" id="formOmschrijving" placeholder="Omschrijving">
          <input style="width:30%" type="text" name="formUurprijs" id="formUurprijs" placeholder="Uurprijs">
          <input style="width:30%" type="text" name="formUren" id="formUren" placeholder="uren">
      </div>
      <div class="modal-footer">
        <button type="button" id="factuurFormSend" class="btn btn-primary">Verzenden</button>
      </div>
      </form>
    </div>
  </div>
</div>

<script>
    document.getElementById("factuurFormSend").onclick = addLine;
      var omschList=[];
      var uurprList=[];
      var aantalList=[];
      var idlist=["omschrijving",
                  "uurprijs",
                  "aantal",
                  omschList,
                  uurprList,
                  aantalList]
    function addLine(){
        omschList.push(document.getElementById("formOmschrijving").value);
        uurprList.push(document.getElementById("formUurprijs").value);
        aantalList.push(document.getElementById("formUren").value);
        print()
    }

        /*print de lijnen verticaal uit*/
    function print(){
        for (var j =0;j<3;j++){
            document.getElementById(idlist[j]).getElementsByTagName("UL")[0].innerHTML="";
            for (var i = 0; i<omschList.length;i++){
                var li = document.createElement("LI");
                if (j==0){
                    li.innerHTML = (idlist[j+3][i]+"<object align=\"right\" onclick=\"verwijder("+i+")\"><u>verwijder</u></object>");
                } else {
                    li.innerHTML = (idlist[j+3][i]);
                }
                document.getElementById(idlist[j]).getElementsByTagName("UL")[0].appendChild(li);
            }
        }
        /*bereken lijntotaal*/
        document.getElementById("lijntotaal").getElementsByTagName("UL")[0].innerHTML=""
        var subtotaal=0;
        for (var i=0; i<uurprList.length;i++){
            var totaal = uurprList[i]*aantalList[i];
            subtotaal +=totaal;
            var li = document.createElement("LI");
            li.innerHTML=totaal;
            document.getElementById("lijntotaal").getElementsByTagName("UL")[0].appendChild(li);
        }
        /*subtotaal en btwtotaal wegschrijven*/
        document.getElementById("subtotaal").innerHTML=subtotaal;
        document.getElementById("btwbedrag").innerHTML=(subtotaal*0.21);
        document.getElementById("totaal").innerHTML=(subtotaal*1.21);
    }

    function verwijder(index){
        for (var i=0;i<3;i++){
            idlist[i+3].splice(index, 1);
        }
        print();
    }
} );
</script>

4

1 回答 1

0

如果您想内联分配点击事件，请将您的函数放在全局范围内。不在加载事件处理程序中。

最好不要内联添加点击事件，而是使用事件委托。jQuery 对此有很好的工具。此外，您的代码是纯 javascript 和 jQuery 函数之间的奇怪组合。它会起作用，但我认为最好保持一种风格以提高可读性

(function($) {

  $(document).ready(function() {

    /* VIEWPORT FIXES (http://timkadlec.com/2013/01/windows-phone-8-and-device-width/) */
    if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
      var msViewportStyle = document.createElement('style');
      msViewportStyle.appendChild(
        document.createTextNode(
          '@-ms-viewport{width:auto!important}'
        )
      );
      document.querySelector('head').appendChild(msViewportStyle);
    }    

    document.getElementById("factuurFormSend").onclick = addLine;

  });

  function addLine() {
    omschList.push(document.getElementById("formOmschrijving").value);
    uurprList.push(document.getElementById("formUurprijs").value);
    aantalList.push(document.getElementById("formUren").value);
    print()
  }
})(jQuery);

var omschList = [];
var uurprList = [];
var aantalList = [];   
var idlist = ["omschrijving",
  "uurprijs",
  "aantal",
  omschList,
  uurprList,
  aantalList
]

/*print de lijnen verticaal uit*/
function print() {
  for (var j = 0; j < 3; j++) {
    document.getElementById(idlist[j]).getElementsByTagName("UL")[0].innerHTML = "";
    for (var i = 0; i < omschList.length; i++) {
      var li = document.createElement("LI");
      if (j == 0) {
        li.innerHTML = (idlist[j + 3][i] + "<object align=\"right\" onclick=\"verwijder(" + i + ")\"><u>verwijder</u></object>");
      } else {
        li.innerHTML = (idlist[j + 3][i]);
      }
      document.getElementById(idlist[j]).getElementsByTagName("UL")[0].appendChild(li);
    }
  }
  /*bereken lijntotaal*/
  document.getElementById("lijntotaal").getElementsByTagName("UL")[0].innerHTML = ""
  var subtotaal = 0;
  for (var i = 0; i < uurprList.length; i++) {
    var totaal = uurprList[i] * aantalList[i];
    subtotaal += totaal;
    var li = document.createElement("LI");
    li.innerHTML = totaal;
    document.getElementById("lijntotaal").getElementsByTagName("UL")[0].appendChild(li);
  }
  /*subtotaal en btwtotaal wegschrijven*/
  document.getElementById("subtotaal").innerHTML = subtotaal;
  document.getElementById("btwbedrag").innerHTML = (subtotaal * 0.21);
  document.getElementById("totaal").innerHTML = (subtotaal * 1.21);
}

function verwijder(index) {
  for (var i = 0; i < 3; i++) {
    idlist[i + 3].splice(index, 1);
  }
  print();
}

如果您希望能够在单击时删除对象，您可以使用 jQuery 和事件委托非常容易地做到这一点。

//Wait till the initial DOM loading is done
$(document).ready(function() {
  //Attach an event handler to the click event to the button the adds a new object
  $("#addObject").on('click', function() {
    $('#staticParent').append("<div class='deletableObject'>deletable on click</div>")
  });

  //Attach event delegation from the element with id staticParent to place a function on
  //the click event of all elements with the class deletableObject inside the element with
  //id staticParent. Because it's event delegation it will work also for elements with this
  //class the will be added later dynamicly.
  $("#staticParent").on('click', '.deletableObject', function() {
    $(this).remove();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="staticParent" style="min-height: 100px">
  <div class="deletableObject">deletable on click</div>
</div>
<button id="addObject">Add</button>

于 2018-12-14T11:19:10.027 回答