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

【问题标题】：how to call javascript function from html and pass parameter through it如何从html调用javascript函数并通过它传递参数
【发布时间】：2017-05-15 10:08:31
【问题描述】：

我正在添加 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-->

【问题讨论】：

我不是 PHP 专家，但您似乎在这里循环生成 <script> function copy_text() {..？如果这是真的，您希望调用哪个copy_text() 实例？如果循环部分为真，这可能不是您在此处定义的正确解决方案。
请更新您的问题，说明此处提供的答案对您没有帮助的原因，以便我们为您提供有效的答案。

标签： javascript

【解决方案1】：

对于您问题的第一部分，您可以通过使用事件方法调用您的函数来做到这一点。

例子：

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!";
}

&lt;h1 onclick="changeText(this)"&gt;Click on this text!&lt;/h1&gt;

在函数（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; ?>; 。当您的 PHP 与您的 JS 位于同一页面时，此方法有效。

【讨论】：

这种模式var x = <?php echo $valor_x; ?>; 虽然作为我观察的一个选项是有效的，但往往会导致代码脆弱和/或更难维护。不确定 OP 是否看到所提供的代码比发布的问题有更多的问题，所以这不是你的问题。

【解决方案2】：

看起来您有许多 ID 为 total\[\] 的元素（即每行一个）。除了不是特别有吸引力的 ID（我个人不会在 ID 中放入符号）之外，它们不是唯一的，哪些 ID 必须是！如果有意义的话，我可能会将它们重命名为total-<?php echo $i; ?>。

最后，您的 copy_text 函数被定义了多次（每个 PHP 循环一次，检查 PHP 的输出），这也导致了出错。我会将其设为单参数函数，即copy_text(id)，并且只在循环外定义一次，但如果您认为这很复杂，您可以保持原样，但将每个函数命名为copy_text_<?php echo $i; ?>。

【讨论】：

这里有一些有效的点。