OnClick仅运行一次

Question

我有一个非常简单的代码，用于切换textareas的内容可见性，第一个扩展textarea以显示整个内容，第二个将其返回到以前的大小并显示滚动条。 两个按钮在第一次运行时都工作正常，但此后什么也没做，就我所知，没有任何错误，我想在这里进行操作以使两个按钮在首次运行后都能正常工作

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