javascript - OnClick 仅运行一次

Question

我有一段非常简单的代码，用于切换文本区域的内容可见性，第一个扩展文本区域以显示整个内容，第二个将其返回到之前的大小并显示滚动条。两个按钮第一次都工作正常，但之后什么也不做，据我所知没有错误，有什么想法我需要在这里做什么才能使两个按钮在初始运行后保持工作

<button
onclick='document.getElementById("input0").style.overflow="visible";
        document.getElementById("kpi1").style.overflow="visible";
        document.getElementById("m_kpi1").style.overflow="visible";
        document.getElementById("g_kpi1").style.overflow="visible"'
></button>

<button 
onclick='document.getElementById("input0").style.overflowY="scroll";
        document.getElementById("kpi1").style.overflowY="scroll";
        document.getElementById("m_kpi1").style.overflowY="scroll";
        document.getElementById("g_kpi1").style.overflowY="scroll"'
></button>

Answer 1

因为两个按钮都设置不同的属性，并且一旦设置，就无法重置它，如果您想在第二个按钮单击时恢复第一个按钮设置，那么它会起作用。

尝试:

<button
onclick='document.getElementById("input0").style.overflow="visible";
        document.getElementById("kpi1").style.overflow="visible";
        document.getElementById("m_kpi1").style.overflow="visible";
        document.getElementById("g_kpi1").style.overflow="visible"'
></button>

<button 
onclick='document.getElementById("input0").style.overflow="scroll";
        document.getElementById("kpi1").style.overflow="scroll";
        document.getElementById("m_kpi1").style.overflow="scroll";
        document.getElementById("g_kpi1").style.overflow="scroll"'
></button>

一个建议是将 javascript 代码放入函数中并在 onclick 中调用它。

function setOverflow(value){
  document.getElementById("input0").style.overflow=value;
  document.getElementById("kpi1").style.overflow=value;
  document.getElementById("m_kpi1").style.overflow=value;
  document.getElementById("g_kpi1").style.overflow=value;
}

和 html:

<button onclick='setOverflow("scroll")'>scroll</button>
<button onclick='setOverflow("visible")'>visible</button>