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。我们想在单击按钮时触发此功能。

例如，如果我们想从左侧和sendTo右侧，则transferInputVal将向右侧输入分配左侧的值。

在声明此函数后，我们从DOM中读取按钮并创建两个变量，这些变量将保存对应按钮的引用。

然后我们为每个按钮添加一个事件监听器click。单击一个按钮时，它将调用第二个参数传递的函数，在此处写为arrow function，以提高可读性。

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

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

1 个答案: