javascript - if/else 阻止违背我意愿的按钮点击事件

Question

我正在创建一个带有表单的页面，用户可以在表单中动态地输入商品的名称 (iname) 和价格 (iprice)，这样用户就可以输入任意数量的商品。所以流程如下:

1. 页面加载了一个表单，该表单显示了一个用于输入项目名称的输入(iname)

2. 在名称输入外单击时触发onblur 事件，运行另一个函数以添加输入以进入商品价格

3. 3- 在该函数中我想运行 if/else(我将很快描述)它将在哪里运行 onclick 以提交表单如果单击保存按钮或重新运行函数以创建结果用户继续输入商品名称和价格的另一个输入。

4. 4- if/else 部分是我需要帮助的部分纯 js(请不要使用框架或 jquery)

我的代码:

 <script>
  import { onMount } from 'svelte';

  function getinfo(){

  let x = document.querySelectorAll('input')
  for (let i = 0; i < x.length; i++) {
                 let values = x[i].value;
    // persist the added values to db, localstorage...etc
    // for now, just log it
            console.log("input-value: ", values)
               }    
    } 
    
   onMount( () => {
        //create a name input, append it, add onblur fn that create price input  
       var iname = document.createElement('input')   
       iname.classList.add("name", "border", "space")      
       var parent = document.getElementById("parent");
       parent.appendChild(iname);         
        
       // Once you click outside or hit tab, create price input.       
       iname.onblur = function ()  {
           addprice()
       }
                    
           }  
     ) 
     
   function additem(){
   
    //Create an input, add classes and set its focus
       var parent = document.getElementById("parent"); 
       var iname = document.createElement('input')   
       iname.classList.add("name", "border", "space")      
       parent.appendChild(iname);         
       iname.focus()   
    
       // Once you click outside, add another price input(run addprice)   
       iname.onblur = function () {
               addprice()
       };
           
       }  
      
      
    function addprice() {
       
    //Create price input, add classes and set its focus
       var parent = document.getElementById("parent");
       var iprice = document.createElement('input');      
       parent.appendChild(iprice);
       iprice.classList.add("price", "border") 
       iprice.focus() 
      
    let btn = document.getElementById("button")
        
            //*****************************************//
               // Need Your Help With This Part //
                 // if btn is clicked, run getinfo()
    if (btn.clicked === true) {  
       btn.onclick = function () {
         getinfo();  
       }                     
   } else {
               // if btn not clicked, run onblur to add another item input
        iprice.onblur = function () {
             additem()
        }
    } // end of else block
   }  // end of addprice()       
    
</script>



<h1> Enter Menu Items </h1>

<form id="mainform" name="formcollect">

    <div class="parent" id="parent">

    </div>

    <button id="button" class="space" type="button" >SAVE</button>
</form>

我为此页面使用了 svelte/sapper，但运行它的是普通的旧 js 代码。是 btn.clicked=== true 是错误的条件。因为如果我单独使用 btn.onclick() 部分运行代码，它会执行代码应该执行的操作并运行 getinfo() 并记录输入的值。如果我运行 iprice.onblur() 它会添加一个新输入并且我会继续执行该循环(创建 iname 输入和 iprice 输入)但是如果我添加 if/else block ，就像我在上面的代码中包含的那样，它只会运行 onblur 函数我一直在创建输入，但按钮不会触发 getinfo()。

请观看我创建的这个视频，这样问题就清楚了，因为它很难描述。 Watch Youtube video describing the issue请注意，当我单击保存(我已完成创建输入和输入数据)并想要保存表单时，保存按钮会继续创建输入。点击保存后如何提交？

Answer 1

input-blur事件在button-click事件之前触发

您的输入之一的 blur 事件在按钮上的 click 事件之前触发。您通过创建一个新的输入字段并关注该输入字段来响应此 blur 事件。

演示证明:

const button = document.getElementById('button');
button.addEventListener('click', () => {
  console.log('Submitting info..');
})

const input = document.getElementById('input');
input.addEventListener('blur', () => {
  console.log('Creating and focusing a new input');
  input.focus();
});

input.focus();

<input id='input' />
<button id='button'>Unreachable button</button>

为什么超时是一个糟糕的解决方案

您可以通过超时和在 onclick 事件中取消它们来绕过它。但是，如果用户想要单击输入之外的任何内容怎么办？它总是会创建一个新的输入，除非您清除 blur 事件中设置的超时。

使用这样的方法会导致非常非常糟糕的用户体验。我很确定您正在努力取得好成绩。

一个建议

总是有一个空的输入字段会更容易接受。您必须检查最后一个字段是否为空。 input 事件是一个更好听的事件。

按照以下思路实现:

• 在输入端监听input事件
• 检查最后一个输入字段是否为空值
• 如果没有在末尾插入一个空字段(没有焦点)
• 否则什么都不做
• 在单击按钮时获取值，但过滤掉空值。

你应该可以接受这个。祝你好运 ;)。