如何從html調用javascript函數並通過它傳遞參數

Question

我正在添加ca，part_a，part_b數字，並直接在總字段中寫入總數並通過javascript計算gpa。在我的第一行中，我通過javascript獲得了總計和GPA值，但在第二行和下一行中，我沒有得到總計和GPA值，我該如何解決？

<div> 
    <ul class="breadcrumb"> 
     <li> 
      <a href="#">Home</a> <span class="divider">/</span> 
     </li> 
     <li> 
      <a href="#">Forms</a> 
     </li> 
    </ul> 
</div> 

<div class="row-fluid sortable"> 
    <div class="box span12"> 
     <div class="box-header well" data-original-title> 
      <h2><i class="icon-edit"></i>Add All Student Mark</h2> 
      <h3> 

      </h3> 
      <div class="box-icon"> 
       <a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a> 
       <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a> 
       <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a> 
      </div> 
     </div> 
     <div class="box-content"> 
      <form class="form-horizontal" action="<?php echo base_url();?>super_admin/save_all_student_mark" method="post" enctype="multipart/form-data"> 
       <fieldset> 
        <legend>Add all Student Mark</legend> 
        <h3> 
         <?php 
         $msg = $this->session->userdata('message'); 
         if ($msg) { 
          echo $msg; 
          $this->session->unset_userdata('message'); 
         } 
         ?> 
        </h3> 




        <div class="box-content"> 
        <table class="table table-striped table-bordered bootstrap-datatable"> 
         <thead> 
          <tr> 
           <th>Student Roll</th> 
           <th>CA</th> 
           <th>Part A</th> 
           <th>Part B</th> 
           <th>Total</th> 
           <th>GPA</th> 
          </tr> 
         </thead> 
         <tbody> 
          <?php $i=0;?> 
          <?php foreach($student_info_by_session as $student_info){?> 
          <tr> 
           <td> 
            <input type="text" class="span12 typeahead" value="<?php echo $student_info->student_roll; ?>"> 
            <input type="hidden" class="span12 typeahead" name="data\[<?php echo $i; ?>\]\[student_id\]" value="<?php echo $student_info->student_id; ?>"> 
            <input type="hidden" class="span12 typeahead" name="data\[<?php echo $i; ?>\]\[subject_id\]" value="<?php echo 11; ?>"> 
           </td> 
           <td> 
            <input type="text" class="span12 typeahead" id="ca\[\]" name="data\[<?php echo $i; ?>\]\[ca\]" onkeyup="copy_text();" > 
           </td> 
           <td> 
            <input type="text" class="span12 typeahead" id="part_a\[\]" name="data\[<?php echo $i; ?>\]\[part_a\]" onkeyup="copy_text();" > 
           </td> 
           <td> 
            <input type="text" class="span12 typeahead" id="part_b\[\]" name="data\[<?php echo $i; ?>\]\[part_b\]" onkeyup="copy_text();" > 
           </td> 

           <script>   
             function copy_text() 
             { 

               var total_mark=+document.getElementById('ca\[\]').value + +document.getElementById('part_a\[\]').value + +document.getElementById('part_b\[\]').value; 
               document.getElementById('total\[\]').value=total_mark; 

               if(total_mark>=80){ 
                document.getElementById('grade\[\]').value=4.0; 
               } 
               else if(total_mark>=75){ 
                document.getElementById('grade\[\]').value=3.75; 
               } 
               else if(total_mark>=70){ 
                document.getElementById('grade\[\]').value=3.5; 
               } 
               else if(total_mark>=65){ 
                document.getElementById('grade\[\]').value=3.25; 
               } 
               else if(total_mark>=60){ 
                document.getElementById('grade\[\]').value=3.0; 
               } 
               else if(total_mark>=55){ 
                document.getElementById('grade\[\]').value=2.75; 
               } 
               else if(total_mark>=50){ 
                document.getElementById('grade\[\]').value=2.5; 
               } 
               else if(total_mark>=45){ 
                document.getElementById('grade\[\]').value=2.25; 
               } 
               else if(total_mark>=40){ 
                document.getElementById('grade\[\]').value=2.0; 
               } 
               else{ 
                document.getElementById('grade\[\]').value=0.0; 
               } 

             } 
           </script> 

           <td> 
            <input type="text" class="span12 typeahead" id="total\[\]" name="data\[<?php echo $i; ?>\]\[total\]" > 
           </td> 
           <td> 
            <input type="text" class="span12 typeahead" id="grade\[\]" name="data\[<?php echo $i; ?>\]\[grade\]" > 
           </td> 
          </tr> 
          <?php $i++;} ?> 
          <tr class="form-actions"> 
           <button type="submit" class="btn btn-primary">Save changes</button> 
           <button type="reset" class="btn">Cancel</button> 
          </tr> 
         </tbody> 
        </table>    
       </div> 
       </fieldset> 
      </form> 

     </div> 
    </div><!--/span--> 

</div><!--/row--> 

Answer 1

看起來你有很多元素（每行即，一個）與ID的喜歡total\[\]。公寓從不是特別有吸引力的ID（我個人不會把符號放在ID中），它們不是唯一的，這些ID必須是！如果有意義的話，我可能會將它們重命名爲total-<?php echo $i; ?>。

最後，您的copy_text函數被定義多次（每個PHP循環一次，檢查PHP的輸出），這也會導致出錯。我將它作爲一個單參數函數，即copy_text(id)，並且只在循環外定義它，但如果您認爲這很複雜，您可能會保持它的方式，但爲每個函數命名爲copy_text_<?php echo $i; ?>。

Answer 2

對於問題的第一部分，您可以使用事件方法來調用您的函數。

例子：

function myFunction() { 
 
    document.getElementById("demo").innerHTML = "Hello World"; 
 
}

<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p> 
 

 
<button onclick="myFunction()">Click me</button> 
 

 
<p id="demo"></p>

或者使用JavaScript事件偵聽器。

例：

document.getElementById("myBtn").addEventListener("click", displayDate); 
 

 
function displayDate() { 
 
    document.getElementById("demo").innerHTML = Date(); 
 
}

<p>This example uses the addEventListener() method to attach a click event to a button.</p> 
 

 
<button id="myBtn">Try it</button> 
 

 
<p id="demo"></p>

或者使用jQuery事件偵聽器。

例子：

$(document).ready(function(){ 
 
    $("p").click(function(){ 
 
     alert("The paragraph was clicked."); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Click on this paragraph.</p>

對於你的問題，你可以通過將其當你調用你的函數，或讓他們當您使用您的函數發送參數的第二部分。

調用函數時發送參數舉例：

function changeText(id) { 
 
    id.innerHTML = "Ooops!"; 
 
}

<h1 onclick="changeText(this)">Click on this text!</h1>

例爲獲得當你在函數（JS）：

function myFunction() { 
 
    var x = document.getElementById("myText").value; 
 
    document.getElementById("demo").innerHTML = x; 
 
}

First Name: <input type="text" id="myText" value="Mickey"> 
 

 
<p>Click the button to display the value of the value attribute of the text field.</p> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<p id="demo"></p>

舉例，當你在函數（jQuery的）獲得：

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     var first_name = $("#user_f").val(); 
 
     var last_name = $("#user_l").val(); 
 
     var name = first_name + " " + last_name; 
 
     $("#user").val(name); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> First Name: <input type="text" id="user_f"></p> 
 

 
<p> Last Name: <input type="text" id="user_l"></p> 
 

 
<p>Name: <input type="text" id="user"></p> 
 

 
<button>Set the value of the input field</button>

如果你想有一個服務器端的變量，你可以使用這種形式。在你的函數js中使用這個var x = <?php echo $valor_x; ?>;。當你有你的JS在同一個頁面上時，這是有效的。