按钮点击需跳转对应IP并执行logout.php但功能失效的技术咨询

我来帮你搞定这个问题！你现在的按钮点击逻辑有几个小错误，导致没办法同时完成跳转和登出操作，咱们一步步来修正：

先说说原代码里的问题 #

• 语法错误：onclick里的URL多了多余的括号（比如http://10.23.32.20();），而且logout.php();被当成字符串写了，根本没实际调用登出逻辑
• 重复ID：两个按钮的id都是cape，这不符合HTML规范，ID必须是唯一的
• 按钮类型错误：type="cape"是无效值，按钮的合法类型是button、submit或reset

修正后的完整代码 #

我写了一个通用的点击处理函数，先确保登出请求发送完成，再跳转到目标IP：

<head>
  <meta charset="UTF-8">
  <title>Title of the document</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script>
    function handleButtonClick(targetUrl) {
      // 先调用logout.php，用fetch确保请求发送成功
      fetch('logout.php')
        .then(() => {
          // 登出请求完成后，跳转到目标IP地址
          window.location.href = targetUrl;
        })
        .catch(error => {
          // 万一登出请求失败，也正常跳转（可根据需求调整逻辑）
          console.error('登出请求失败:', error);
          window.location.href = targetUrl;
        });
    }
  </script>
</head>
<body>
  <p>
    <button type="button" id="cape-btn" onclick="handleButtonClick('http://10.23.32.20')">Cape</button>
  </p>
  <button type="button" id="quay4-btn" onclick="handleButtonClick('http://10.23.30.20')">Quay 4</button>
</body>
</html>

额外补充：兼容性更好的方案 #

如果你的环境需要兼容老旧浏览器，也可以用隐藏图片的方式触发登出请求，避免fetch的兼容性问题：

function handleButtonClick(targetUrl) {
  // 创建隐藏图片触发登出请求
  const logoutImg = new Image();
  logoutImg.src = 'logout.php';
  // 延迟100ms跳转，确保请求有足够时间发送
  setTimeout(() => {
    window.location.href = targetUrl;
  }, 100);
}

内容的提问来源于stack exchange，提问作者Zlatan