如何从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位于同一页面时，此方法有效。