Javascript 根据操作更改按钮的id和文本_Javascript_Html_Css

Javascript 根据操作更改按钮的id和文本

javascript html css

Javascript 根据操作更改按钮的id和文本,javascript,html,css,Javascript,Html,Css,这是我的密码： <!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-

这是我的密码：

<!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>


min（）返回最小值
最大值
闵

函数minFunction（）{
document.getElementById（“demo”）.innerHTML=
数学最小值（0,150,30,20，-8，-200）；
}
函数maxFunction（）{
document.getElementById（“demo”）.innerHTML=
最大值（0，150，30，20，-8，-200）；
}

它很好用。我现在想让按钮上的id和文本成为动态的

我想一次显示一个按钮？默认情况下，我希望显示Max按钮，当用户单击它时，maxFunction（）计算并给出结果

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

默认值：最大值

然后我想用min button替换max button，它的onclick更改为minFunction（），所以它的id

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

min

反之亦然

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

关于你的问题:

Math.min（）返回最小值
最大值
闵

函数minFunction（）{
var min=数学min（0,150,30,20，-8，-200）；
document.getElementById（“demo”）.innerHTML=min
document.getElementById（“rButton”）.innerHTML=min；
}
函数maxFunction（）{
var max=数学最大值（0,150,30,20，-8，-200）；
document.getElementById（“demo”）.innerHTML=max
document.getElementById（“lButton”）.innerHTML=max
}

我已经更新了你的函数和id，所以它会动态地更改和更新文本

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

更改它。请尝试以下脚本，该脚本具有用于切换按钮的非常简单的逻辑

它的作用是：

在开始时创建两个按钮
把它们都藏起来
仅在开始时显示max按钮
当用户单击“最大”按钮时，隐藏“最大”按钮并显示“最小”按钮
当用户单击“最小”按钮时，隐藏“最小”按钮并显示“最大”按钮

（功能（窗口）{
var createMaxBtn=函数（）{
var btns=document.getElementById（'btns'）；
btns.innerHTML+='max'；
}
createMinBtn=函数（）{
var btns=document.getElementById（'btns'）；
btns.innerHTML+='min'；
},
隐藏=函数（id）{
var elm=document.getElementById（id）；
elm.style.display='none'；
},
显示=功能（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）；
隐藏（'minBtn'）；
显示（'maxBtn'）；
},
maxFunction=函数（）{
var elm=document.getElementById（'demo'）；
elm.innerHTML=Math.max（0,150,30,20，-8，-200）；
隐藏（'maxBtn'）；
显示（'minBtn'）；
}
createMaxBtn（）；
createMinBtn（）；
隐藏（'maxBtn'）；
隐藏（'minBtn'）；
显示（'maxBtn'）；
})（窗口）
Math.min（）返回最小值
尝试以下更改，我已经更新了您当前实现中的最小代码，它可以按照您的预期工作
在HTML中：
<p>Math.min() returns the lowest value.</p>

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

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

Math.min（）返回最小值
最大值


在脚本中：
<script>
    function minFunction() {
        document.getElementById("demo").innerHTML =
        Math.min(0, 150, 30, 20, -8, -200);
        document.getElementById("rButton").innerHTML = 'max';
        document.getElementById("rButton").setAttribute("onclick", 'maxFunction()');
    }
    function maxFunction() {
        document.getElementById("demo").innerHTML =
        Math.max(0, 150, 30, 20, -8, -200);
        document.getElementById("rButton").innerHTML = 'min';
        document.getElementById("rButton").setAttribute("onclick", 'minFunction()');
    }
</script> 


函数minFunction（）{
document.getElementById（“demo”）.innerHTML=
数学最小值（0,150,30,20，-8，-200）；
document.getElementById（“rButton”）.innerHTML='max'；
document.getElementById（“rButton”）.setAttribute（“onclick”，“maxFunction（）”）；
}
函数maxFunction（）{
document.getElementById（“demo”）.innerHTML=
最大值（0，150，30，20，-8，-200）；
document.getElementById（“rButton”）.innerHTML='min'；
document.getElementById（“rButton”）.setAttribute（“onclick”，“minFunction（）”）；
}
是否希望一次显示一个按钮？就像默认情况下，您希望显示Max按钮，当用户单击它时，maxFunction（）计算并给出结果，然后您希望Max按钮被替换为min按钮，它的onclick更改为minFunction（）及其id。此外，你应该为“最小”和“最大”按钮使用唯一的id。是的…完全相同@Robert…不，你回答了其他问题。我更新了我的问题。我认为这是误会。见更新的问题。