Html 我需要一个用于修改脚本的按钮

我需要一个交替运行这两个代码的按钮：

document.querySelector（'.top left'）.style.width='340px'

document.querySelector（'.top-left'）.style.width='0px'

单击一次执行一个，再次单击执行另一个

它是一个按钮，用于隐藏页面上的列

有人能帮我吗？ 我不明白。 我创建了按钮，但我不能添加该功能到它

点击我
<button onclick="myFunction">Click me</button>
const myFunction = (event)=> {
  const elm= document.querySelector('.top-left');
  if(elm.style.width==="340px")
    elm.style.width = '0px';
  else
    elm.style.width = '340px'
};

常量myFunction=（事件）=>{
const elm=document.querySelector（'.top left'）；
如果（elm.style.width==“340px”）
elm.style.width='0px'；
其他的
elm.style.width='340px'
};

您想要的是

你的按钮看起来像这样

<button id="button-show-hide">Show/Hide</button>

let el = document.querySelector('.top-left')
let button = document.getElementById('button-show-hide')

button.addEventListener('click',showHide)

function showHide(){
   el.classList.toggle('hide')
}

---

欢迎来到StackOverflow Fealbrunos！这确实有助于提供一个最小的可复制示例：

.top-left .hide {
  width: 0px;
}