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

Question

我要添加ca，part_a，part_b編號，然后直接在total字段中寫總數，並通過javascript計算gpa。 在我的第一行中，我通過javascript獲取了Total和GPA值，但是在第二行和下一行中，我沒有獲取Total和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\\[\\] 。 Appart不是特別吸引人的ID（我個人不會在ID中放入符號），因為它們不是唯一的，ID必須是唯一的！ 我可能會將它們重命名為total-<?php echo $i; ?> total-<?php echo $i; ?>如果有意義。

最后，您的copy_text函數被定義了多次（每個PHP循環一次，請檢查PHP的輸出），這也會導致出錯。 我將其copy_text(id)一個單參數函數，即copy_text(id)並且僅在循環外對其進行一次定義，但是如果您認為很復雜，則可以按copy_text_<?php echo $i; ?>保留它，但是將每個函數copy_text_<?php echo $i; ?> 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 ap 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; ?>; var x = <?php echo $valor_x; ?>; 。 當您的PHP與JS位於同一頁面時，此方法有效。