function confirmChange(button) { var row = button.parentNode.parentNode; var input = row.querySelector('input[type="date"]'); var span = input.parentNode.querySelector('span'); var value = input.value; span.innerHTML = value; input.setAttribute('data-value', value); input.style.display = 'none'; span.style.display = 'inline-block'; span.style.display = 'none'; // 隐藏之前添加的span元素 }执行时DOM元素没有加载到页面
时间: 2023-06-20 11:05:54 浏览: 48
如果该函数在页面加载完成之前被调用,则会出现该问题。为了避免这种情况,可以将该函数绑定到DOMContentLoaded事件上,以确保函数在页面完全加载后执行。例如:
```
document.addEventListener('DOMContentLoaded', function() {
function confirmChange(button) {
// 函数体...
}
});
```
另外,也可以将该函数放在一个单独的JavaScript文件中,并将其放在页面底部,以确保在DOM元素完全加载后才执行该函数。
相关问题
function confirmChange(button) { var row = button.parentNode.parentNode; var input = row.querySelector('input[type="date"]'); var span = input.parentNode.querySelector('span'); var value = input.value; span.innerHTML = value; input.setAttribute('data-value', value); input.style.display = 'none'; span.style.display = 'inline-block'; }
这是一个 JavaScript 函数,用于确认用户更改日期输入框中的值。当用户点击确认按钮时,该函数会获取到所在行的日期输入框和其对应的显示日期的 span 元素,然后将输入框中的值更新到 span 中,并且将输入框隐藏,将 span 显示出来。同时,将输入框中的值保存到其 data-value 属性中,以便后续使用。
var row = selectId.parentNode.parentNode; var select = row.getElementById(selectId);
这段代码有错误。在JavaScript中,节点对象没有 `getElementById` 方法,只有 `document` 对象有这个方法。如果你想选择一个节点下的某个元素,可以使用 `querySelector` 或者 `querySelectorAll` 方法。
以下是修改后的代码:
```
var row = selectId.parentNode.parentNode;
var select = row.querySelector('#' + selectId);
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
h1>学生信息表格 <form class="info" autocomplete="off"> 姓名:<input type="text" class="uname" name="uname" /> 科目<input type="text" class="subject" name="subject" /> 成绩:<input type="text" class="score" name="score" /> <button class="add">录入</button> </form> 姓名 科目 成绩 操作 操作 <script> var data = [{ uname: '张三', subject: 'JavaScript', score: 100 }, { uname: '李四', subject: 'JavaScript', score: 90 }, { uname: '刘五', subject: 'JavaScript', score: 90 }]; var tbody = document.querySelector('tbody'); for (var i = 0; i < data.length; i++) { var tr = document.createElement('tr'); tbody.appendChild(tr); for (var k in data[i]) { var td = document.createElement('td'); td.innerHTML = data[i][k]; tr.appendChild(td); } var td = document.createElement('td'); td.innerHTML = '<a href="javascript:;">删除 </a>'; tr.appendChild(td); var td = document.createElement('td'); td.innerHTML = <button onclick="moveUp(this)">上移</button> <button onclick="moveDown(this)">下移</button> ; tr.appendChild(td); } var uname = document.querySelector('.uname'); var subject = document.querySelector('.subject'); var score = document.querySelector('.score'); var info = document.querySelector('.info'); var tbody = document.querySelector('tbody'); var arr = []; info.addEventListener('submit', function (e) { e.preventDefault(); var obj = { uname: uname.value, subject: subject.value, score: score.value, } arr.push(obj); this.reset(); for (var i = 0; i < arr.length; i++) { var tr = document.createElement('tr'); tr.innerHTML = ${arr[i].uname} ${arr[i].subject} ${arr[i].score} 删除 <button onclick="moveUp(this)">上移</button> <button onclick="moveDown(this)">下移</button> ; } tbody.appendChild(tr); }) var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { tbody.removeChild(this.parentNode.parentNode) } function moveUp(btn) { var row = btn.parentNode.parentNode; var prevRow = row.previousElementSibling; if (prevRow) { row.parentNode.insertBefore(row, prevRow); } else { row.parentNode.appendChild(row); } } } function moveDown(btn) { var row = btn.parentNode.parentNode; var nextRow = row.nextElementSibling; if (nextRow) { row.parentNode.insertBefore(nextRow, row); } else { var firstRow = row.parentNode.firstElementChild; row.parentNode.insertBefore(row, firstRow); } } </script>怎么用数组索引上下移动行
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)