使用事件侦听器检查值是否已更改
使用事件侦听器检查值是否已更改
提问于 2022-03-31 12:12:59
我已经创建了一个check函数，在这个函数中，代码检查用户是否更改了某个值。如果有，则应该显示一个模式，如果值没有更改，请返回到前一个屏幕。问题是，在某些屏幕上，值已经存在，所以使用id检查不起作用。
以下是输入的例子：
<div class="govuk-input__wrapper"> <input
aria-label="Enter the total percetage for January. Enter 0 if this does not apply"
class="input-suffix govuk-input govuk-input--width-5" id="input-4"
onblur="sumPercentage()" name="installmentPercentage" type="text value=" value="5"
aria-describedby="percent">
<div class="govuk-input__suffix" aria-hidden="true">%</div>
</div>
<div class="govuk-form-group right-align">
<div class="govuk-input__wrapper">
<div class="govuk-input__prefix right-align" aria-hidden="true">£</div>
<input aria-label="Enter the total amount for February. Enter 0 if this does not apply"
class="govuk-input input-prefix govuk-input--width-7" id="input-3"
onblur="sumTotal()" name="installmentValue" type="text" aria-describedby="currency"
autocomplete="off" value="320,000">
</div>
</div>每次触发它时，“input4ValueChanged”和“input3ValueChanged”的输入值都会更改。
document.getElementById("input-4").addEventListener("change", input4ValueChanged),
document.getElementById("input-3").addEventListener("change", input3ValueChanged),将input4WasChanged和input3WasChanged设置为false，因为我们希望在模态出现时将其设置为true
function check() {
let input4WasChanged = false
let input3WasChanged = false启动计数器
let counter = 0如果输入更改为真，则打开“notSaved”模式
if (input4WasChanged === true) {
document.getElementById('notSaved').style.display = 'block'
counter++
}
if (input3WasChanged === true) {
document.getElementById('notSaved').style.display = 'block'
counter++
}
if (counter === 0) {
history.back()
}
}如果值已更改，则显示模式。
function input4ValueChanged(){
if(document.getElementById("input-4").value != "")
{
input4WasChanged = true;
}
}
function input3ValueChanged(){
if(document.getElementById("input-4").value != "")
{
input3WasChanged = true;
}
}回答 1
Stack Overflow用户
发布于 2022-03-31 12:25:35
我不太清楚您在这里要求什么，但您似乎在Js或Html文件中犯了错误。由于您的ids不同：
你的js：Boolean(document.getElementById(**"input-4"**).value),
html：<input ... id="input-4 value=" ...>
我希望我能帮上忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71692266
复制相关文章
相似问题
腾讯云开发者
