个人中心
gpt4 book ai didi

javascript - 如何为一个Element设置变化属性？使用 JS 而不是 JQuery

转载 作者：行者123 更新时间：2023-12-03 01:21:01 27 4
gpt4 key购买 nike

我正在尝试创建一个表单，根据选中的复选框更改输入字段的属性。我在另一个问题中看到我们可以创建一个具有类似功能的元素及其属性，但是当我将其调整为这种形式时，它不起作用，任何人都可以帮助我做到这一点吗？我知道使用 JQuery 更容易，但我需要用纯 JS 完成此操作。

<!DOCTYPE html>
<html>
<body>

<form role="search" method="get" action="">
<input type="checkbox" id="check-minor" name="check-minor" onclick="searchFunc()"> <label for="check-minor">Menor</label>
<input type="text" name="qt" id="qt" placeholder="Write your Shop Code" required pattern="[0-9A-Za-z]{7,9})" size="30">
</div>
<button type="submit" class="btn btn-default" id="submit-button">Search</button>
</form>

<script>

function setAttributes(elements, attributes) {
  Object.keys(attributes).forEach(function(name) {
    element.setAttribute(name, attributes[name]);
  })
}

var qtpie = document.getElementById("qt");
function searchFunc() {
    if (document.getElementById("check-minor").checked){
        setAttributes(qtpie, {
            required pattern: "[0-9]{11}",
            placeholder: "Shop Code for Minors"
        }) 
    } else {
        document.getElementById("qt").placeholder= "Write your Shop Code"
    }

</script>

</body>
</html>

最佳答案

这里，您的代码中存在一些拼写错误问题并且缺少大括号

  function setAttributes(elements, attributes) {
      Object.keys(attributes).forEach(function (name) {
        elements.setAttribute(name, attributes[name]);
      })
    }

    var qtpie = document.getElementById("qt");

    function searchFunc() {
      if (document.getElementById("check-minor").checked) {
        setAttributes(qtpie, {
          required: "",
          pattern: "[0-9]{11}",
          placeholder: "Shop Code for Minors"
        })
      } else {
        document.getElementById("qt").placeholder = "Write your Shop Code"
      }
    }
<!DOCTYPE html>
<html>

<body>

  <form role="search" method="get" action="">
    <input type="checkbox" id="check-minor" name="check-minor" onclick="searchFunc()">
    <label for="check-minor">Menor</label>
    <input type="text" name="qt" id="qt" placeholder="Write your Shop Code" required pattern="[0-9A-Za-z]{7,9})" size="30">

    <button type="submit" class="btn btn-default" id="submit-button">Search</button>
  </form>

 

</body>

</html>

关于javascript - 如何为一个Element设置变化属性？使用 JS 而不是 JQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51765859/

27 4 0
文章推荐： javascript - 从 json 文件构造 bar 的工具提示值
文章推荐： c# - Entity Framework 与 SQLite 错误 : An error occurred while reading from the store provider's data reader
文章推荐： firefox - 如何使用 Vimperator 将当前 URL 放入剪贴板？
文章推荐： javascript - 通过索引获取对象数组中的第一个元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com