如何从html调用javascript函数并通过它传递参数

Question

我正在添加ca，part_a，part_b数字并直接在总字段中写入总数并通过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\[\]。公寓从不是特别有吸引力的ID（我个人不会在ID中添加符号），它们不是唯一的，必须是ID！如果有意义，我可能会将它们重命名为total-<?php echo $i; ?>。

最后，您的copy_text函数被多次定义（每个PHP循环一次，检查PHP的输出），这也导致出错。我会使它成为一个单参数函数，即copy_text(id)，并且只在循环外定义它一次，但如果你认为这很复杂，你可能会保持它的方式，但是命名每个函数{{1} }。

Answer 2

对于问题的第一部分，您可以使用事件方法调用函数来完成此操作。

示例：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者使用javascript事件监听器。

例：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者使用jquery事件监听器。

示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

对于问题的第二部分，您可以在调用函数时传递参数，或者在使用函数时获取参数。

调用函数时发送参数的示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当您进入函数（JS）时获取的示例：

＆＃13;

＆＃13;

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

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

当你在函数中时获取的例子（Jquery）：

＆＃13;

＆＃13;

$(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);
    });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您需要服务器端变量，可以使用此表单。在你的函数js中使用这个var x = <?php echo $valor_x; ?>;。当您将PHP放在与JS相同的页面中时，这可以正常工作。