TamperMonkey脚本添加修正价格span失败,报querySelector未定义错误
问题排查与修正
你的脚本存在几个关键错误,直接导致了Cannot read properties of undefined的报错,下面逐一说明并修复:
错误1:forEach函数传递方式错误
priceElements.forEach(PerValInsert())中你直接调用了PerValInsert(),而非传递函数引用。这会让PerValInsert立即执行,此时CurrentNode参数为undefined,自然无法调用querySelector。
修正:去掉括号,传递函数本身:
priceElements.forEach(PerValInsert)
错误2:querySelector选择器语法错误
CurrentNode.querySelector('NumberPart')里的NumberPart是class名,选择器必须加.前缀,否则会查找标签名为<NumberPart>的元素,必然返回null。
修正:
var JPElement = CurrentNode.querySelector('.NumberPart')
错误3:获取价格值的方式错误
<span class="NumberPart">是普通文本元素,没有value属性,应该用textContent获取其文本内容后转成数字。
修正:
var originalPrice = parseFloat(JPElement.textContent.trim()) var CorrectValue = Math.round(originalPrice * 1.44) // 计算后取整,和示例输出一致
错误4:创建节点的方式错误
document.createtextnode是驼峰拼写错误(正确为createTextNode),且用文本节点会把<span> (£108)</span>当成纯文本显示,无法解析成HTML元素。应该直接创建span元素再设置文本内容。
修正:
var CorrectValNode = document.createElement('span') CorrectValNode.textContent = ` (£${CorrectValue})` CurrentNode.appendChild(CorrectValNode)
完整修正后的脚本
MainAction() function MainAction() { 'use strict'; var priceElements = document.querySelectorAll('.awe-rt-CurrentPrice') console.log("Elements identified:" + priceElements.length) // 用console.log替代alert,避免频繁弹窗干扰 priceElements.forEach(PerValInsert) console.log("process complete; costs corrected") }; function PerValInsert(CurrentNode, i) { // 获取价格节点 var JPElement = CurrentNode.querySelector('.NumberPart') if (!JPElement) { // 增加容错逻辑,避免找不到节点时脚本中断 console.log(`Element ${i} has no NumberPart, skipped`) return } // 计算修正后价格 var originalPrice = parseFloat(JPElement.textContent.trim()) var CorrectValue = Math.round(originalPrice * 1.44) // 创建并添加新的span元素 var CorrectValNode = document.createElement('span') CorrectValNode.textContent = ` (£${CorrectValue})` CurrentNode.appendChild(CorrectValNode) console.log(`Element ${i} corrected`) };
额外优化说明
- 替换
alert为console.log,减少对浏览体验的干扰 - 增加节点存在性判断,避免因页面结构差异导致脚本中断
内容的提问来源于stack exchange,提问作者Spencer Barnes
相关产品推荐
相关产品推荐

