JS中text()不显示日期时间、设置style.width报错如何解决？

问题1：日期时间无法显示在指定节点 #

问题原因 #

• HTML代码中id="b1"的引号未闭合（写为id ="b1>），导致document.getElementById('b1')无法获取到对应DOM元素，后续查找#currentTime节点自然失效
• 额外优化说明：id属性在页面中全局唯一，不需要通过父元素逐层查找，可直接定位目标节点

修复方案 #

首先修复HTML的语法错误：

<div id="b1">
     <i class="icon-clock"></i> <span class="font-weight-bold font-size-lg" id="currentTime"></span>
</div>

JS逻辑可直接用原生实现，无需依赖jQuery，还补充了个位数补0的优化：

const currentTimeEl = document.getElementById('currentTime');
const today = new Date();
// 个位数补0处理，避免出现2024-5-3 9:2:3这类不规范格式
const padZero = num => num < 10 ? `0${num}` : num;
const date = `${today.getFullYear()}-${padZero(today.getMonth()+1)}-${padZero(today.getDate())}`;
const time = `${padZero(today.getHours())}:${padZero(today.getMinutes())}:${padZero(today.getSeconds())}`;
currentTimeEl.textContent = `${date} ${time}`;

如果要沿用jQuery写法，直接定位目标节点即可：

$('#currentTime').text(`${date} ${time}`);

问题2：进度条设置宽度报错 #

问题原因 #

$(target).find('#div1')获取到的是jQuery包装对象，不是原生DOM对象，jQuery对象没有原生的style属性，所以访问d1.style会得到undefined，对其设置width就会抛出你遇到的类型错误。

修复方案 #

共有三种可选实现方式：

1. 用jQuery提供的css()方法设置样式：

const d1 = $('#div1');
const d2 = $('#div2');
d1.css('width', '78%');
d2.css('width', '22%');

2. 将jQuery对象转为原生DOM对象再操作style：

const d1 = $('#div1')[0]; // 取索引0即可拿到原生DOM节点
const d2 = $('#div2')[0];
d1.style.width = '78%';
d2.style.width = '22%';

3. 完全用原生JS实现，无需依赖jQuery：

const d1 = document.getElementById('div1');
const d2 = document.getElementById('div2');
d1.style.width = '78%';
d2.style.width = '22%';

内容的提问来源于stack exchange，提问作者Davi