gpt4 book ai didi

javascript - 为什么我的 JavaScript 可以在这里运行,但不能在我的本地主机或 JSFiddle 中运行?

转载 作者:行者123 更新时间:2023-11-28 00:47:48 25 4
gpt4 key购买 nike

我正在尝试创建一个动态网页,其中每个按钮都显示一个特定的 <div>页面同时隐藏 <div> 的其余部分页面。

我将它部署在此处、我的本地主机和 jsfiddle 上,但不知为何它无法在 jsfiddle 和我的本地主机上正常运行,但它可以在此处运行。

我不太清楚为什么会这样?

我的 HTML:

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>
<button onClick="myFunction2()">Try it</button>
<button onClick="myFunction3()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<div id="div2" style="display: none;">
Div2
</div>

<div id="div3" style="display: none;">Div3</div>

我的 CSS:

#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
#div2{
width: 100%;
padding: 50px 0;
text-align: center;
background-color: purple;
margin-top: 20px;
}

#div3{
width: 100%;
padding: 50px 0;
text-align: center;
background-color: yellow;
margin-top: 20px;
}

我的 JavaScript:

function myFunction() {
var x = document.getElementById("myDIV");
var y = document.getElementById("div2");
var z = document.getElementById("div3");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
}
}

function myFunction2() {
var x = document.getElementById("div2");
var y = document.getElementById("myDIV");
var z = document.getElementById("div3");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
}
}

function myFunction3() {
var x = document.getElementById("div3");
var y = document.getElementById("myDIV");
var z = document.getElementById("div2");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
}
}

function myFunction() {
var x = document.getElementById("myDIV");
var y = document.getElementById("div2");
var z = document.getElementById("div3");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
}
}

function myFunction2() {
var x = document.getElementById("div2");
var y = document.getElementById("myDIV");
var z = document.getElementById("div3");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
}
}

function myFunction3() {
var x = document.getElementById("div3");
var y = document.getElementById("myDIV");
var z = document.getElementById("div2");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
z.style.display = "none";
}
}
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
#div2{
width: 100%;
padding: 50px 0;
text-align: center;
background-color: purple;
margin-top: 20px;
}

#div3{
width: 100%;
padding: 50px 0;
text-align: center;
background-color: yellow;
margin-top: 20px;
}
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>
<button onClick="myFunction2()">Try it</button>
<button onClick="myFunction3()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<div id="div2" style="display: none;">
Div2
</div>

<div id="div3" style="display: none;">Div3</div>

编辑:

我的 JSfiddle 链接:https://jsfiddle.net/yvw4gwwh/3/

最佳答案

<body> 中将您的 Javascript 加载类型更改为 No wrap - ;在这里试试:https://jsfiddle.net/yvw4gwwh/14/

enter image description here

关于javascript - 为什么我的 JavaScript 可以在这里运行,但不能在我的本地主机或 JSFiddle 中运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49500584/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com