与带有 onClick 的表单无关的按钮在表单中不起作用答案

【问题标题】：button that is not related to form with onClick does not work in a form与带有 onClick 的表单无关的按钮在表单中不起作用
【发布时间】：2021-08-19 08:00:38
【问题描述】：

我很困惑一个问题。

何时在表单内。这没用。发生此错误。

未捕获的类型错误：插入不是函数

但是当它在表格之外时。效果很好。

我想将带有 onclick=insert 的按钮放在旁边 [输入类型="文本" id = "总" 名称="总"]

我该怎么办？

<form method="post" action={{ route('gumit')}}>
    @csrf                
        <label for="Scotland" class="col-md-4 col-form-label text-md-right">{{ __('info') }}</label>
        <div class="col-md-6">
            <input type="hidden" name="id" value = "{{$company->id}}" >                     
            <textarea type="textarea" class = "textarea" id="item" >Here is...</textarea>
                <br/>
                ：<input type="text" id = "cost" name="cost" value =""> 
                ：<input type="text" id = "total" name="total" value =""> 
                <input type="button" id="insert" class="button" value="BUTTON" onclick="insert()">
                <br/>
            <button type="submit" class="button">submit</button>
            <input type="button" id="b1" class="button" value="BUTTON" onclick="update()">
    </div>
</form>
            
<script>
   function update() {
   }
   function insert() {
   }
</script>

【问题讨论】：

按钮的id也是insert。重命名函数或按钮。
@ChrisG 他为什么要那样做？
@ChrisG 当我更改按钮的 id 时，它可以工作。谢谢
@FlashThunder 不确定它是如何工作的，但 id 变成了一个全局变量，所以我猜它会覆盖函数定义
@ChrisG DOM id 不存在于任何变量范围内，它只是具有该 id 的 DOM 节点。这就是为什么你不能直接使用id，但你必须使用getElementById()

标签： javascript

【解决方案1】：

我建议您尝试以下两种方法中的任何一种：

尝试在 HTML 文件的开头定义脚本。那应该做的工作。
使用 document.querySelector("#b1") 获取按钮，然后对其使用 onClick 方法

让 b1= document.querySelector("#b1"); b1.onClick(()=>{ //函数代码 })

【讨论】：

【解决方案2】：

你应该使用锚点作为按钮

working js-demo

(function (document, window, undefined) {
  'use strict';
  
  // Buttons
  var buttons = document.querySelectorAll('.js-button');   
  
  var displayContent = function (button, content) {
    if (content.classList.contains('active')) {
        // Hide content
        content.classList.remove('active');
        button.setAttribute('aria-expanded', 'false');
        content.setAttribute('aria-hidden', 'true');
      } else {
        // Show content
        content.classList.add('active');
        button.setAttribute('aria-expanded', 'true');
        content.setAttribute('aria-hidden', 'false');
      }
  };
  
  [].forEach.call(buttons, function(button, index) {
    // Content var
    var content = button.nextElementSibling;
    
    // Set button attributes
    button.setAttribute('id', 'button-' + index);
    button.setAttribute('aria-expanded', 'false');
    button.setAttribute('aria-controls', 'content-' + index);
    
    // Set content attributes
    content.setAttribute('id', 'content-' + index);
    content.setAttribute('aria-hidden', 'true');    
    content.setAttribute('aria-labelledby', 'button-' + index);
  
    button.addEventListener('click', function () {
      displayContent(this, content);
      return false;
    }, false);
    
    button.addEventListener('keydown', function (event) {
      // Handle 'space' key
      if (event.which === 32) {
        event.preventDefault();
        displayContent(this, content);
      }
    }, false);
    
  });  
  
})(document, window);

【讨论】：