我已经为一个网站创建了一个脚本,在那里它更新了上面的标题(H3)的输入框.

为了避免有多个if,我决定创建一个字典,但收到一个错误:

未捕获的TypeError:无法设置Null的属性(设置‘Value’)

我的第一个代码是:

    var k = 1;
    for (var i = 2; i < 29; i++) {
    var j = i-k;
    if(document.querySelector('h3:nth-child('+i+')'))
    {
        var value = document.querySelector('h3:nth-child('+i+')').innerHTML;
        if( value.includes("Value1"))
        {
            document.querySelector('#q'+j).value = "random_value1";
        }
        else if( value.includes("Value2"))
        {
            document.querySelector('#q'+j).value = "random_value2";
        }
        else if( value.includes("Value3"))
        {
            document.querySelector('#q'+j).value = "random_value3";
        }           
        else
        {
            // do nothing
        }
        k = k+1;
    }
}

而且它运行得很好.我的词典代码如下:

Code Snippet

const myself = {
  Value1: "random_value1",
  Value2: "random_value2",
  Value3: "random_value3"

};

var k = 1;

for (var key in myself) {
  console.log(key)
  console.log(myself[key])
  for (var i = 2; i < 29; i++) {
    var j = i - k;
    if (document.querySelector('h3:nth-child(' + i + ')')) {
      var value = document.querySelector('h3:nth-child(' + i + ')').innerHTML;
      if (value.includes(key)) {
        console.log("true")
        document.querySelector('#q' + j).value = myself[key];
      } else {
        // do nothing
      }
      k = k + 1;
    }
  }
}
<div class="html_form">&nbsp;<br>
  <h3>Value1:</h3>
  <input type="text" name="q1" id="q1">
  <h3>Value2:</h3>
  <input type="text" name="q2" id="q2">
</div>

推荐答案

考虑到您提供的HTML,这是可以简化的.首先,由于这input个元素是这h3个元素的后续sibling 元素,因此您可以简单地使用nextElementSibling(),而不必拼凑一个 Select 器字符串,或者用不必要的属性搅乱HTML.

此外,您可以使用单循环遍历对象属性来查找匹配的h3个元素,并在需要时执行更新.

下面是一个工作示例:

const h3 = document.querySelectorAll('.html_form > h3');
const myself = { Value1: "random_value1", Value2: "random_value2", Value3: "random_value3" };

for (const [key, value] of Object.entries(myself)) {
  const target = [...h3].find(el => el.textContent.includes(key));
  if (target) {
    target.nextElementSibling.value = value;
  }
}
<div class="html_form">
  &nbsp;<br>
  
  <h3>Value1:</h3>
  <input type="text" name="q1" id="q1">

  <h3>Value2:</h3>
  <input type="text" name="q2" id="q2">
</div>

Javascript相关问答推荐

setFinder关闭模式并重定向到url

如何通过继承contentitable属性的元素捕捉keydown事件?

如何循环访问对象数组并以关键值形式获得结果?

调用SEARCH函数后,程序不会结束

如何从对象嵌套数组的第二级对象中过滤出键

模块与独立组件

Bootstrap动态选项卡在切换选项卡后保持活动状态,导致元素堆叠

我开始使用/url?q=使用Cheerio

按下同意按钮与 puppeteer 师

InDesign—创建一个独立的窗口,在文档中进行更正时保持打开状态

如何从一个列表中创建一个2列的表?

在带有背景图像和圆形的div中添加长方体阴影时的重影线

虚拟滚动实现使向下滚动可滚动到末尾

Html文件和客户端存储的相关问题,有没有可能?

如何使用JavaScript拆分带空格的单词

在浏览器中触发插入事件时检索编码值的能力

根据一个条件,如何从处理过的数组中移除一项并将其移动到另一个数组?

FireBase云函数-函数外部的ENV变量

ngOnChanges仅在第二次调用时才触发

React Refs不与高阶组件(HOC)中的动态生成组件一起工作