时间戳

首页 > 解决方案 > 我的 javascript Show and hide 代码不起作用？

javascript - 我的 javascript Show and hide 代码不起作用？

问题描述

我正在做一个显示和隐藏container1的任务，为什么我的代码不起作用我的任务是：单击显示按钮（将显示container1）和隐藏按钮（隐藏container1）

这是html

function Show() {
  document.getElementById('Khenchela').style.display = 'block'
}

function Hide() {
  document.getElementById('Khenchela').style.display = 'none'
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="3.css">

<head>
  <title>JAVA SCRIPT WEBSITE</title>
</head>

<body>
  <button oneclick="Show()">Hide London</button>
  <button oneclick="Hide()">Show London</button>
  <div id="Khenchela" class="container 1">
    <h3>Khenchela</h3>
    <p>Khenchela is the Tadjalt city of Algeria </p>
  </div>
  <div id="Batna" class="container 2">
    <h3>Batna </h3>
    <p>Batna is the Tnakt city of algeria</p>
  </div>
  <div id="Biskra" class="container 3">
    <h3>Biskra</h3>
    <p>Biskra is the 'after' Tnakt city of algeria</p>
  </div>
  <script src="2.js" type="text/javascript"></script>
</body>

</html>

标签： javascripthtml

解决方案

你有错字，应该onclick不是oneclick。

function Show() {
  document.getElementById('Khenchela').style.display = 'block'
}

function Hide() {
  document.getElementById('Khenchela').style.display = 'none'
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="3.css">

<head>
  <title>JAVA SCRIPT WEBSITE</title>
</head>

<body>
  <button onclick="Hide()">Hide London</button>
  <button onclick="Show()">Show London</button>
  <div id="Khenchela" class="container 1">
    <h3>Khenchela</h3>
    <p>Khenchela is the Tadjalt city of Algeria </p>
  </div>
  <div id="Batna" class="container 2">
    <h3>Batna </h3>
    <p>Batna is the Tnakt city of algeria</p>
  </div>
  <div id="Biskra" class="container 3">
    <h3>Biskra</h3>
    <p>Biskra is the 'after' Tnakt city of algeria</p>
  </div>
  <script src="2.js" type="text/javascript"></script>
</body>

</html>

推荐阅读