javascript - 计算表返回错误或空白页

Question

我正在尝试创建一个表单，显示用户将给出的 2 组笛卡尔积。

由于某种原因，它不起作用...

片段：

    function cartesianProductOf() {
        return _.reduce(arguments, function(a, b) {
            return _.flatten(_.map(a, function(x) {
                return _.map(b, function(y) {
                    return x.concat([y]);
                });
            }), true);
        }, [ [] ]);
    };
    
    $(document).ready(function(){
      $("#calculate").click(function(){
    
        document.body.appendChild(form);
    
        var setone = $("#setoneinput").value;
        var settwo = $("#settwoinput").value;
    
        console.log(setone);
        console.log(settwo);
    
    
        // document.write ( cartesianProductOf($setone,$settwo) );
        console.log("Clicked");
    
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container inputs-container">
  <form>
    <div class="row">
      <div class="form-label-group col-sm-6 input-div">
        <input type="text" class="form-control" id="setoneinput" name="setone" placeholder="Set One">
      </div>
      <div class="form-label-group col-sm-6 input-div">
        <input type="text" class="form-control" id="settwoinput" name="settwo" placeholder="Set Two">
      </div>
      <small class="notice">Please insert a comma between each set element</small>
      <div class="form-label-group col-sm-12 calculate-button-container">
        <span formtarget="_blank" class="calculate-button" id="calculate" name="Calculate"><i class="fas fa-calculator"></i></span>
      </div>
    </div>
  </form>
</div>

请注意，该 js 位于另一个名为 scripts.js 的文件中

我得到的错误是：

未捕获的 ReferenceError：表单未在 HTMLSpanElement 中定义。(scripts.js:14) 在 HTMLSpanElement.dispatch (jquery-3.3.1.slim.min.js:2) 在 HTMLSpanElement.v.handle (jquery-3.3.1.slim.min.js:2)

标签： javascriptjquery

Answer 1

您的代码中有两个错误

• 没有声明表单变量需要使用var form = document.forms[0];

• 使用错误的获取值与 jqueryvar settwo = $("#settwoinput").value;需要更改为var settwo = $("#settwoinput").val();

请参阅下面的更正

function cartesianProductOf() {
        return _.reduce(arguments, function(a, b) {
            return _.flatten(_.map(a, function(x) {
                return _.map(b, function(y) {
                    return x.concat([y]);
                });
            }), true);
        }, [ [] ]);
    };
    
    $(document).ready(function(){
      var form = document.forms[0];
      $("#calculate").click(function(){
    
        document.body.appendChild(form);
    
        var setone = $("#setoneinput").val();
        var settwo = $("#settwoinput").val();
    
        console.log(setone);
        console.log(settwo);
    
    
        // document.write ( cartesianProductOf($setone,$settwo) );
        console.log("Clicked");
    
      });
    });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container inputs-container">
  <form>
    <div class="row">
      <div class="form-label-group col-sm-6 input-div">
        <input type="text" class="form-control" id="setoneinput" name="setone" placeholder="Set One">
      </div>
      <div class="form-label-group col-sm-6 input-div">
        <input type="text" class="form-control" id="settwoinput" name="settwo" placeholder="Set Two">
      </div>
      <small class="notice">Please insert a comma between each set element</small>
      <div class="form-label-group col-sm-12 calculate-button-container">
        <span formtarget="_blank" class="calculate-button" id="calculate" name="Calculate"><i class="fas fa-calculator"></i></span>
      </div>
    </div>
  </form>
</div>