网页，jquery传递值lose：未捕获的类型错误：无法设置null的属性(设置“innerHTML”)

wnavrhmk  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(190)

我试图保存编辑的数据，同时点击“发送消息”按钮
下面是错误消息：
未捕获的类型错误：无法设置null的属性（设置“innerHTML”）
似乎说“itemValue”是无，但我不知道在哪里得到的问题？

<script>
    var storedItem = localStorage.getItem("storedItem");
    
    function save() {
      var itemValue = document.getElementById("input_edit_data").value;
      localStorage.setItem("storedItem", itemValue);
      document.getElementById("savedText").innerHTML = itemValue;
      console.log("storedItem", storedItem);
    }
  </script>


  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">device_id:</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="col-form-label">name:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            
            <div class="form-group">
              <label for="field1" class="col-form-label">group:</label>
              <input type="text" class="form-control" id="input_edit_data">
            </div>
            <div class="form-group">
              <label for="field2" class="col-form-label">id :</label>
              <input type="text" class="form-control" id="input_edit_data">
            </div>

       

            <!-- End of additional form fields -->
            
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" onclick="save()">Send message</button>
        </div>
      </div>
    </div>
  </div>

我是新加入这个社区的，想着大家都是优秀的Maven，也许我能得到很酷的反馈，谢谢

  • 完整版本的代码，如果需要
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags and other head elements -->
  <title>Static Template</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  
   
</head>
<body>

  
  
  </html>

  <div id="app"></div>
  <table id="example" class="display"></table>

  <!-- JavaScript libraries -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <script>
    var storedItem = localStorage.getItem("storedItem");
    
    function save() {
      var itemValue = document.getElementById("input_edit_data").value;
      localStorage.setItem("storedItem", itemValue);
      document.getElementById("savedText").innerHTML = itemValue;
      console.log("storedItem", storedItem);
    }
  </script>

  <script>
    $(document).ready(function () {
      const getToken = localStorage.getItem("token")

      console.log("GET TOKEN", getToken)

      var table = $("#example").DataTable({
        ajax: {
          url: "http://192.168.01.10:8000/api/item_status",
          headers: {
            'Authorization': 'Bearer ' + getToken
          },
          dataSrc: function (response) {
            console.log("DATA", response.ipcs);
            return response.ipcs
          }
        },
        columns: [
          {
            data: null,
            title: "ACTION",
            render: function (data, type, row) {
              return '<button class="btn btn-primary btn-sm edit-btn" data-id="' + row.device_id + '">Edit</button>' +
                '<button class="btn btn-danger btn-sm delete-btn" data-id="' + row.device_id + '">Delete</button>';
            }
          },
          {
            data: null,
            title: "edit",
            render: function (data, type, row) {
              return'<button class="btn btn-success btn-sm" data-id="1" data-toggle="modal" data-target="#exampleModal">Edit</button>   ';
            }
          },

          {
            data: null,
            title: "edit_new",
            render: function (data, type, row) {
              return'<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever=" ">edit_new</button>';
            }
          },
          
          { data: "device_id", title: "device_id" },
          { data: "device_id", title: "device_id" },
          { data: "name", title: "name" },
          { data: "group", title: "group" },
          { data: "ip", title: "ip" },

        ]
      });

      table.draw()
  

      var rowData; 

      $('#example tbody').on('click', 'button', function (event) {  

        var data = table.row($(this).parents('tr')).data();
        rowData = data;
  
        console.log("GET edit DATA", data)        

      });

      
      $(function(){
        $('#exampleModal').on('show.bs.modal', function (event) {

          var button = $(event.relatedTarget);
          var recipient = button.data('whatever');
         
          var data = rowData;
          
          var modal = $(this);
          modal.find('.modal-title').text('Update data ' + recipient);
          var inputFields = modal.find('.modal-body input');
          var keys = Object.keys(data);
          for (var i = 0; i < inputFields.length; i++) {
            var inputValue = data[keys[i]];
            $(inputFields[i]).val(inputValue);
          }
        });
      });
  

      function editRow_website(id){
        
   
            
        var device_id=document.getElementById("device_id"+id);  
        var name=document.getElementById("name"+id);  
        var group=document.getElementById("group"+id);
        var ip=document.getElementById("ip"+id);

        
        let getEditData = {
          "device_id": device_id,
          "email_data": name,
          "address_data": group,
          "name_data": ip,
        }

        document.getElementById("#editid input").value = device_id
       

        
      }
      
 
      $(document).on('click', '.delete-btn', function (event) {  
        var id = $(this).data('id')
        
        console.log("GET DLETE ID", id)

        confirmDelete(id) 
      });

      function deleteData(id) {
        $.ajax({
          url: "http://192.168.01.10:8000/api/item_status="+ id,
          type:'DELETE',
          headers: {
            'Authorization': 'Bearer ' + getToken  
          },
          success: function(response){
            console.log(response);
          }

        }).then(res => console.log("RES", res));  
      }

      function editRow(id) {


        console.log("EDIT", getFinalData);

      }

      function confirmDelete(id) {
        if (confirm("sure to delete this row？")== true) {
          var table = $("#example").DataTable();
          var row = table.row($(this).closest('tr'));
          deleteData(id);

          if (row.length > 0) {
            row.remove().draw();
            console.log("Delete row with id:", id);
          }
        } else{
          none
        }

      }
    });
  </script>
  <script src="script.js"></script>

  <div class ="table-title">
    <div class="row">
      <div class="col-sm-4">
        <button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i>Add New</button>
      </div>
    </div>
  </div>

  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">device_id:</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="col-form-label">name:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            
            <div class="form-group">
              <label for="field1" class="col-form-label">group:</label>
              <input type="text" class="form-control" id="input_edit_data">
            </div>
            <div class="form-group">
              <label for="field2" class="col-form-label">id :</label>
              <input type="text" class="form-control" id="input_edit_data">
            </div>

                   
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" onclick="save()">Send message</button>
        </div>
      </div>
    </div>
  </div>




  <script>
    $(function() {
        $('#exampleModal').on('show.bs.modal', function(e) {
          $('.modalTextInput').val('');
          let btn = $(e.relatedTarget); // e.related here is the element that opened the modal, specifically the row button
          let id = btn.data('id'); // this is how you get the of any `data` attribute of an element
          $('.saveEdit').data('id', id); // then pass it to the button inside the modal
        })
      
        $('.saveEdit').on('click', function() {
          let id = $(this).data('id'); // the rest is just the same
          saveNote(id);
          $('#exampleModal').modal('toggle'); // this is to close the modal after clicking the modal button
        })
      })
      
      function saveNote(id) {
        let text = $('.modalTextInput').val();
        $('.recentNote').data('note', text);
        console.log($('.recentNote').data('note'));
        console.log(text + ' --> ' + id);
      }

    
    </script>

</body>
</html>
jquery

1条答案

按热度按时间
ut6juiuv

ut6juiuv1#

document.getElementById("savedText")返回null，因此它没有innerHTML可供引用。
你可以改变

document.getElementById("savedText").innerHTML = itemValue;

到

let savedText = document.getElementById("savedText");
if (savedText) {
    savedText.innerHTML = itemValue;
}

这将检查是否找到元素，如果存在，则只设置其innerHTML，以防止错误发生。
但是你的元素是有原因的，你需要找出原因。你要么根本没有这样的元素，这似乎是基于你共享的代码的情况，其中不存在这样的标签，或者当你的JavaScript计算时它没有加载。

赞(0）分享  回复(0）举报  2023-06-22
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com