javascript - 为什么这个功能不起作用？显示 val 为 null 的错误

Question

该函数正在从模态表中调用。通过ajax访问表体。在此表中，每一行都有两个文本框。每行和每个文本框的 ID 都不同。我将在下面显示我的代码。

ajax 函数是

$(document).ready(function(){
    /////////////// Invoice Link Click ////////////////
    $("#invoice").click(function(){

        var rowID=[];

        ///////// Initialize and assign row row value /////////////
        rowID = arrays;
        var tempArrays='';
        for(i=0;i<arrays.length;i++){
        if(arrays[i]!=''){
            if(tempArrays!=''){
                tempArrays=tempArrays+','+arrays[i];
                }
            else{
                tempArrays=arrays[i];
                }


            }
        }

        alert("SUCCESS ALERT" +tempArrays);

        alert(typeof tempArrays);
        if(rowID!=''){
            $.ajax({
                url:'<?php echo base_url(); ?>index.php/Ajax_calls/invoicingFetch',
                type: 'POST',
                data:{tempArrays:tempArrays},

                success: function(data){

                    $('#newtest').html(data);
                    alert("SUCCESSFULLY RETURNED............!!!!!!!!");

                    }
                });

            }


        });
    }); 

在 AJAX Controller 功能:

public function invoicingFetch(){
    if(isset($_POST['tempArrays'])){
            $output='';
            $postedVal=$this->input->post('tempArrays');
            $myArray = explode(',',$postedVal);

            $this->load->model('Ajax_model');
            $arrayLen=sizeof($myArray);
            for($i=0;$i<$arrayLen;$i++)
            {
                $arre=$myArray[$i];
                $records = $this->Ajax_model->getRawdataGDSSingle($arre);
                foreach($records as $row){
                    $saleid='sale'.$row->slno;
                        $marginid='margin'.$row->slno;
                    $output.='

                    <tr>
                        <td style="text-align:center !important;"><input type="checkbox" id="'.$row->slno.'"  /> </td>
                        <td>'.$row->NAME.' </td>
                        <td>'.$row->TOTAL.' </td>
                        <td><input type="text" id="'.$saleid.'" name="saleamount" onKeyPress="UpdateMargin('.$saleid.','.$marginid.','.$row->TOTAL.')" onChange="UpdateMargin('.$saleid.','.$marginid.','.$row->TOTAL.')" value="'.$row->TOTAL.'" /> </td>
                        <td><input type="text" id="'.$marginid.'" name="marginamount" onchange="UpdateSale('.$marginid.','.$saleid.','.$row->TOTAL.')" value="0"  /> </td>
                        <td>'.$row->BKD_BY.' </td>
                        <td> </td>
                        <td>'.$routing.' </td>
                        <td>'.$row->A2L.' </td>
                        <td>'.$row->TKT_NUMBER.' </td>
                    </tr>
                    ';
                    }
                }

            echo $output;  ///this output is the table body in modal
            }
     }

模态页面标题上的 脚本 模态页面标题

function UpdateMargin(saleid,marginid,total){
    var sales=document.getElementById(saleid).value;
    //var margin=document.getElementById(marginid).value;
    var total=total;
    var salMargin=sales-total;
    document.getElementById(marginid).value=salMargin;
    }

控制台中显示的错误是

将错误显示为未捕获类型错误:无法读取 null 的属性“val”

谁能告诉我原因吗？为什么会这样？预先感谢所有才华横溢的人......

Answer 1

.val() 是一个 JQuery 函数。

但是您在没有 JQuery 的情况下获取元素。

因此，如果 var margin=document.getElementById(marginid).value; 有效，则必须将 .val() 代码更改为 var sales = $( '#' + saleid ).val();

如果获取 .value 不起作用，则可能是该元素没有值(可能不是输入元素)，而您正在寻找 insideText 或 innerHTML 或某些数据属性。

如果以上情况均不成立，则 saleid 可能不是 HTML 中的有效 ID。