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）

Answer 1

您的代码中有两个错误

未声明表单变量需要使用var form = document.forms[0];
对jquery var 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>

计算表返回错误或空白页

1 个答案: