JavaScript 传递数据的行为

问题描述 投票:0回答:1

当我将数据作为参数传递给通过请求获取的函数并对其执行无效合并时,它不起作用,如果我想检查它的空值,那么不要将其分配给变量,将另一个东西分配给变量。但是当我通过传递 id 发送另一个请求来获取该数据时,它会按我想要的方式工作。

示例:

function getQ(CatID) {
        CtID = CatID
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '<?php echo base_url('Main/getQ') ?>?ID=' + CatID);
        xhr.send();
        xhr.onload = function() {
                let response = JSON.parse(xhr.responseText);
                renderQuestions(response);
            }
        };
    }
function renderQuestions(response) {
        let html = '';
        for (let i = 0; i < response.length; i++) {
            let auditDate = response[i].AuditDate;
            if (auditDate == '' || auditDate == null) {
                let newTime = new clock()
                auditDate = newTime.getCurrentTime();
            } else {
                auditDate = response[i].AuditDate.split(" ")[0];
            }
            html += `
                                <tr class="tablerows">
<td><button class="btn btn-icon btn-primary" onclick = "openmodal('${response[i].BeforeInspectedDate}')">CAP</button></td>

                                </tr>
                            `;
        }
this does not work if empty it does not assign the value gotten by class it only assigns if value existed.
function openmodal(BeforeInspectedDate) {
        let beforedate = document.getElementById('bdate')
        const newtime = new clock()
// i have tried other conditions as well they dont work. like nullish coalescing etc.
        if (!BeforeInspectedDate) {
            beforedate.value = newtime.getCurrentTime();
        } else {
            let newbeforedate = BeforeInspectedDate.split(' ')[0]
            beforedate.value = newafterdate;
        }
    }

这有效:

<td><button class="btn btn-icon btn-primary" onclick = "openmodal(${response[i].AuditDetailID})">CAP</button></td>
function openmodal(id) {
        // AJAX request to get status
        $.get("<?php echo base_url('Main/getStatus'); ?>", {
                id: id
            })
            .done(function(data) {
                if (data) {
                    const newtime = new clock()
                    if(data[0].BeforeInspectedDate != null){
                        BeforeInspectedDate = data[0].BeforeInspectedDate.split(' ')[0]
                    }
                    else{
                        BeforeInspectedDate = newtime.getCurrentTime();
                    }
                    document.getElementById('bdate').value =  BeforeInspectedDate
                    console.log(document.getElementById('bdate').value)
                }
            })
    };
javascript html codeigniter
1个回答
0
投票

可能是您没有正确分配事件处理程序?我尝试使用虚拟 API 调用重写您的逻辑,并为每个按钮添加 onClicks。当然不是最优化的方法,但您可以进一步重构它:

<!DOCTYPE html>
<html>

<body>

  <div>
    <table id="mainTable"></table>
  </div>
  <script>
    window.onload = (event) => {
      function getQ(CatID) {
        CtID = CatID
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://dummy-json.mock.beeceptor.com/posts');
        xhr.send();
        xhr.onload = function () {
          let response = JSON.parse(xhr.responseText);
          renderQuestions(response);
        }
      };

      function renderQuestions(response) {
        let html = '';
        for (let i = 0; i < response.length; i++) {
          let title = response[i].title;
          let auditDate = ''
          if (title) {
            let newTime = new Date();
            auditDate = newTime.getTime();
          } else {
            auditDate = response[i].comment_count;
          }
          document.getElementById('mainTable').innerHTML += `
              <tr class="tablerows">
                  <td>
                    <button id="btn${i}" class="btn btn-icon btn-primary">
                      ${auditDate}${response[i].title} CAP
                    </button>
                  </td>
               </tr>
            `;
        }
        for (let i = 0; i < response.length; i++) {
          document.getElementById('btn' + i).addEventListener('click', () => {
            let BeforeInspectedDate = new Date() + response[i].title;
            console.log('>>> BeforeInspectedDate', BeforeInspectedDate)
            let beforedate = document.getElementById('bdate')
            const newtime = new Date();
            // i have tried other conditions as well they dont work. like nullish coalescing etc.
            if (!BeforeInspectedDate) {
              beforedate.value = newtime.getCurrentTime();
            } else {
              let newbeforedate = BeforeInspectedDate.split(' ')[0]
              //beforedate.value = newafterdate;
            }
          });
        }
      }
      getQ(1);
    };
  </script>
</body>
</html>

说明:

  • 代码为每个按钮分配一个新的 id
  • 然后使用自定义数据为每个按钮添加事件侦听器

这可能有帮助:https://stackoverflow.com/a/34896325/6281489

© www.soinside.com 2019 - 2024. All rights reserved.