Question

这是我的代码：

function keyDown (e) {
  if (e.repeat) { return }

  // do stuff here
}

工作正常。我现在想在按钮动态上创建id和文本。

我想一次显示一个按钮？默认情况下，我想显示Max按钮，当用户点击它时，maxFunction（）会评估并给出结果

<!DOCTYPE html>
<html>
<body>

<p>Math.min() returns the lowest value.</p>

<button style="background-color: #ff0000;"  id="rButton" onclick="maxFunction()" >max</button>
<button style="background-color: #ff0000;"  id="rButton" onclick="minFunction()" >min</button>

<p id="demo"></p>

<script>
function minFunction() {
    document.getElementById("demo").innerHTML =
    Math.min(0, 150, 30, 20, -8, -200);
}
function maxFunction() {
    document.getElementById("demo").innerHTML =
    Math.max(0, 150, 30, 20, -8, -200);
}
</script>

</body>
</html>

然后我想用最小按钮替换最大按钮，然后点击更改为minFunction（），以及它的id。

default:  <button style="background-color: #ff0000;" id="rButton" onclick="maxFunction()" >max</button>

反之亦然。

Answer 1

尝试使用以下脚本，该脚本具有切换按钮的非常简单的逻辑。

它的作用：

开始时创建两个按钮。
隐藏它们。
首先显示最大按钮。
当用户点击最大按钮时，隐藏最大按钮并显示最小按钮。
当用户点击最小按钮时，隐藏最小按钮并显示最大按钮。

＆＃13;

(function(window) {
  var createMaxBtn = function() {
    var btns = document.getElementById('btns');
    btns.innerHTML += '<button style="background-color: #ff0000;"  id="maxBtn" onclick="maxFunction()" >max</button>';

  }
  createMinBtn = function() {
      var btns = document.getElementById('btns');
      btns.innerHTML += '<button style="background-color: #ff0000;"  id="minBtn" onclick="minFunction()" >min</button>';

    },
    hide = function(id) {
      var elm = document.getElementById(id);
      elm.style.display = 'none';
    },
    show = function(id) {
      var elm = document.getElementById(id);
      elm.style.display = '';
    },
    minFunction = function() {
      var elm = document.getElementById('demo');
      elm.innerHTML = Math.min(0, 150, 30, 20, -8, -200);
      hide('minBtn');
      show('maxBtn');
    },
    maxFunction = function() {
      var elm = document.getElementById('demo');
      elm.innerHTML = Math.max(0, 150, 30, 20, -8, -200);
      hide('maxBtn');
      show('minBtn');
    }

  createMaxBtn();
  createMinBtn();

  hide('maxBtn');
  hide('minBtn');

  show('maxBtn');

})(window);

＆＃13;

<p>Math.min() returns the lowest value.</p>
<div id="btns"></div>
<p id="demo"></p>

＆＃13;

Answer 2

尝试以下更改，我已更新当前实现中的最小代码，并且它可以按预期工作。

在您的HTML中：

ng-if

在你的剧本中：

<p>Math.min() returns the lowest value.</p>

<button style="background-color: #ff0000;"  id="rButton" onclick="maxFunction()" >max</button>

<p id="demo"></p>

Answer 3

首先，HTML中的id用作页面上的单个标识符，并且只能在1个元素中使用。

关于你的问题：

<p>Math.min() returns the lowest value.</p>

<button style="background-color: #ff0000;  "id="lButton" onclick="maxFunction()" >max</button>
<button style="background-color: #ff0000;  "id="rButton" onclick="minFunction()" >min</button>

<p id="demo"></p>

<script>
function minFunction() {
    var min = Math.min(0, 150, 30, 20, -8, -200);
    document.getElementById("demo").innerHTML = min
    document.getElementById("rButton").innerHTML = min;

}
function maxFunction() {
    var max = Math.max(0, 150, 30, 20, -8, -200);
    document.getElementById("demo").innerHTML = max
    document.getElementById("lButton").innerHTML = max
}
</script>

我已更新了您的功能和ID，因此它会动态更改和更新文本。

要更改ID，您应该将元素包装在变量中，并使用variable.id =

进行更改

根据动作改变按钮的id和文本

3 个答案: