将函数结果设置为外部javascript文件上同一函数内的变量

Question

以下内容没有将我的函数的结果带入变量和html页面中...为什么？

外部JAVASCRIPT

function damageRoll(min, max) {
  'use strict';

  document.getElementById("combatResult").innerHTML = damageFinal;

  min = min || peacemaker.damageMin;
  max = max || peacemaker.damageMax;

  var damageFinal = damageRoll();

  return Math.floor(Math.random() * (max - min + 1) ) + min;}

HTML

<div id="combatResult"></div>

<button onclick="damageRoll()">Fight</button>

编辑要通读每个人的答案，但最小/最大可能不是问题。 我无法显示它们从另一个外部js文件中获取了它们的值，并且在我的代码的其他区域中按预期方式工作。 谢谢。

外部JAVASCRIPT＃2

var peacemaker = {
damageMin: 3,
damageMax: 5,

};

Answer 1

1. 您的damageRoll()调用实际上并不包含必需的参数min和max 。 调用时必须添加项目，例如：

<button onclick="damageRoll(min, max)">Fight</button>

在函数本身内：

var damageFinal = damageRoll(min, max);

2. 您递归地调用该函数，而不需要一个基础。 不会发生任何事情，因为该函数将永远无法完成调用。 您可能需要调查一下。

Answer 2

看来您是个初学者，所以我将向您解释我所做的事情，而不仅仅是发布正确的答案。

首先，您应该将函数拆分为处理click事件的函数，然后再计算结果的函数。 最好第二个函数只使用内部处理（不要使用函数外部的变量）

因此您的代码应如下所示：

// example values for object
        const peacemaker = {
            damageMin: 100,
            damageMax: 100
        }

        function damageRollEvent(e) {
            'use strict';
            e.preventDefault();

            var _peacemaker = {
                min: min || peacemaker.damageMin,
                max: max || peacemaker.damageMax
            }

            var damageFinal = damageRoll(_peacemaker);
            document.getElementById("combatResult").innerHTML = damageFinal;
        }

        function damageRoll(_peacemaker) {
            'use strict';
            return Math.floor(Math.random() * (_peacemaker.max - _peacemaker.min + 1)) + _peacemaker.min;
        }

damageRollEvent函数处理事件并与html混淆。

damageRoll返回您期望进行纯编程工作的值。

HTML

<div id="combatResult"></div>

    <button onclick="damageRollEvent($event)">Fight</button>

我没有测试代码，但它应该工作。

Answer 3

您可能想要这样的事情。

function damageRoll(min, max) {
  'use strict';

  min = min || peacemaker.damageMin;
  max = max || peacemaker.damageMax;

  var damageFinal = Math.floor(Math.random() * (max - min + 1) ) + min;
  document.getElementById("combatResult").innerHTML = damageFinal;
}

首先，最小和最大修改应放在函数的前面。 您还应该考虑像上面的示例一样，将damageFinal变量声明放在函数的前面。 不要过度使用JavaScript的变量提升功能。

接下来，原始代码将导致无休止的自我调用。 我不理解您的意图，但是最好不要在您的情况下使用自我调用。

PS：您可以使用es6使代码更简单

function damageRoll(min = peacemaker.damageMin, max = peacemaker.damageMax) {

  var damageFinal = Math.floor(Math.random() * (max - min + 1) ) + min;
  document.getElementById("combatResult").innerHTML = damageFinal;


}

Answer 4

这样一来，您无需递归调用函数即可继续进行，应在中间添加一个辅助函数。 您将通过HTML调用帮助程序。 无论如何，您必须找到一种方法来解决2个变量（最小和最大）。 看到这个..

    function damageRoll(min, max) {

      var damageFinal = Math.floor(Math.random() * (max - min + 1) ) + min;

      document.getElementById("combatResult").innerHTML = damageFinal;

    }

    function throwMinMax(){

       // You should Find a way to resolve the two variables below
       // we have No idea where the peacemaker stuff come from

      var min = peacemaker.damageMin;
      var max = peacemaker.damageMax;

      damageRoll(min,max);

   }