javascript - 带有 from 属性的 document.querySelector 返回 null 错误

Question

首先，我正在学习 JS 和 jQuery。我正在尝试使用按钮将左侧/右侧表单字段的内容复制到右侧/左侧的同一字段。传输函数返回“null”，所以我猜它在 DOM 中找不到该元素。我尝试了不同的语法，但无法修复它。

这是代码片段:https://jsfiddle.net/wc8mzz3p/149/

<div id='main'>
        <div id="rightSidePanel" class="ui form">
                <div id="compareForm" class="fields grid-no-margin">
                    <div id="prjFormLeft" class="seven wide field">
            <div class='ui stackable one column grid grid-no-margin tab active'>
            <div class='column field'><label for='Customer'>Customer</label><input type='text' field='Customer' name='Customer'></input><div class='ui item'>
            <button class='ui right floated icon button' for='Customer' side='Left' onclick='transfer(this)'>
            <i class='right chevron icon'></i></button>
             //--lots of other fields
        </div></div></div></div>
          <div id="prjFormRight" class="seven wide field">
            <div class='ui stackable one column grid grid-no-margin tab active'>
            <div class='column field'><label for='Customer'>Customer</label><input type='text' id='Customer' name='Customer'></input><div class='ui item'><button class='ui icon button' for='Customer' side='Right' onclick='transfer(this)'><i class='left chevron icon'></i></button></div></div>
             //--lots of other fields
         </div></div></div></div>

JS函数:

function transfer(element) {
   var from = element.getAttribute('side');
   var field = element.getAttribute('for');
   if(from === 'Right') var dest = 'Left';
   else var dest = 'Right';
   var destElement = document.querySelector("#prjForm"+dest+" label[for='"+field+"']");
   console.log(destElement);
}

Answer 1

TL;DR:这是a working Jsfiddle针对您的问题。

首先，您应该缩进 (HTML) 代码，以便更容易阅读。

<div id='main'>
    <div id="rightSidePanel" class="ui form">
        <div id="compareForm" class="fields grid-no-margin">
            <div id="prjFormLeft" class="seven wide field">
                <div class='ui stackable one column grid grid-no-margin tab active'>
                    <div class='column field'>
                        <label for='Customer'>Customer</label>
                        <input id="left-input" type='text' field='Customer' name='Customer' />
                        <div class='ui item'>
                            <button id="left-button" class='ui right floated icon button' for='Customer' side='Left'>
                            <i class='right chevron icon'></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="prjFormRight" class="seven wide field">
                <div class='ui stackable one column grid grid-no-margin tab active'>
                    <div class='column field'>
                        <label for='Customer'>Customer</label>
                        <input id="right-input" type='text' name='Customer' />
                        <div class='ui item'>
                            <button id="right-button" class='ui icon button' for='Customer' side='Right'>
                                <i class='right chevron icon'></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

请注意<input />是一个自动关闭的 HTML 标签。看看这个self-closing HTML tag list

现在让我们关注 JavaScript 部分。

function transferInputVal(takeFrom, sendTo) {
  const fromEl = document.getElementById(`${takeFrom}-input`);
  const toEl = document.getElementById(`${sendTo}-input`);

  toEl.value = fromEl.value;
  fromEl.value = '';
}

const leftBtnEl = document.getElementById('left-button');
const rightBtnEl = document.getElementById('right-button');

leftBtnEl.addEventListener('click', () => transferInputVal('left', 'right'));
rightBtnEl.addEventListener('click', () => transferInputVal('right', 'left'));

这里的目标如下:当您单击按钮时，我们会获取输入并将另一个值分配给一个按钮。然后我们清除值来自的输入，这当然是可选的。

为此，我们编写了一个函数 transferInputVal它需要两个参数，takeFrom和sendTo 。我们希望在单击按钮时触发此函数。

例如，如果我们想要从左侧获取并发送到右侧，则transferInputVal会将左侧输入的值分配给右侧输入。

声明此函数后，我们从 DOM 读取按钮并创建两个变量来保存对其相应按钮的引用。

然后我们添加一个事件监听器click到每个按钮。当单击按钮时，它将调用第二个参数中传递的函数，写为 arrow function这里是为了更好的可读性。

请注意，我使用了最新版本的 JavaScript (ES6) 中引入的一些概念。在进一步讨论之前，您可能有兴趣了解有关此主题的更多信息。我写了一篇关于此的文档，check it out if you want to =)。