javascript - 使用 JS 访问操作和值属性

标签 javascript html forms javascript-objects

let dealer={
    name : document.getElementById('dealer-name'),
    submit : document.getElementById('dealer-save'),
};
let dnames=['str', 'name'];

dealer.name.addEventListener('keyup', check);

function check(){

    for (let i=0; i<dnames.length; i++){
        if (dnames[i] === dealer.name.value) {
            console.log('same');
            dealer.submit.value = "Update";
        } else {
            dealer.submit.value = "Save";
        }

    };
}
<!DOCTYPE>
<html>
<body>
  <form action="/php/newdealer.php" id="addDealer">
    <input required type="text" id="dealer-name">
    <input type="submit" value="Save" id="dealer-save">
  </form>
</body>
</html>

代码摘要:

在网页中显示一个简单的表单,其中包含输入字段和提交按钮。每次在输入字段中输入一个字符时,都会执行 check() 函数。

如果输入字段中的值与 dnames[] 数组中的任何元素匹配,则提交按钮的值预计为“update”,并记录字符串“same”进入控制台,否则如果输入字段中的值与 dnames[] 数组中的任何元素都不匹配则提交按钮的值应为“保存”

问题:

当我在输入字段中输入“str”时,“相同”会按预期登录到控制台,但提交按钮的值不会更改为“更新”。为什么dealer.submit.value="Update"无法工作?

最佳答案

问题是你的循环在遇到正确答案后继续运行。

  1. str 是数组中的第一个元素,因此它将按钮值更新为“Update”
  2. 循环转到数组中的下一个值,name
  3. 它与输入值不同,因此会将按钮值更新回“保存”

一切几乎立即运行,因此看起来没有上传。

您可以在为按钮分配“更新”后添加breakreturn来解决此问题,如下所示:

let dealer={
    name : document.getElementById('dealer-name'),
    submit : document.getElementById('dealer-save'),
};
let dnames=['str', 'name'];

dealer.name.addEventListener('keyup', check);

function check(){

    for (let i=0; i<dnames.length; i++){
        if (dnames[i] === dealer.name.value) {
            console.log('same');
            dealer.submit.value = "Update";
            break; // add this to your code
        } else {
            dealer.submit.value = "Save";
        }

    };
}

关于javascript - 使用 JS 访问操作和值属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57499238/

相关文章:

javascript - 无法使用ajax将文件发送到php文件

html - 具有 div 结构的 block 开始输出不正确

html - 悬停在下拉列表中时,如何在导航栏上保持悬停效果?

HTML 表单字段值对齐

javascript - Jquery 将用户定向到特定的 anchor 标记

java - Android 自定义 WebView 无法找到加载的 HTML 中定义的 javascript 函数

javascript - 达到最大高度并且 div 像响应式 overflow-x 一样继续向右移动

javascript - 如何在 HTML Canvas 中制作两个连接的开放弧(没有水平线)?

javascript - Angularjs 单选选择已选中

javascript - 根据所选值创建动态表单