我尝试修复此代码，从而使切换功能的点击功能起作用，但出现错误 未捕获的ReferenceError：未定义toggleFunction 在HTMLButtonElement.onclick
它肯定很容易修复，但我找不到问题。
我试图将document.getElementsByClassName更改为 document.getElementsById，但是没有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
</head>
<body>
<div class="c-section">
<div class="c-header">
<div class="c-header__menu">
<ul class="c-navigation">
<li>Stories</li>
<li>Events</li>
<li>Places</li>
<li>Boards</li>
</ul>
</div>
<div class="c-rotate">
<div class="c-rotate__text">
<h1 class="c-rotate__title">Beautiful Escape</h1>
<p class="c-rotate__text-inspiring">One of the greatest things about the sport of surfing is that you
need only three things: your body a surfboard, and a wave.
</p>
</div>
<div class="c-rotate__image">
<img src="img/vawe.jpg" alt="">
</div>
</div>
</div>
<div class="c-citate">
<p class="c-citate__text">Surfing is the most blissful experience you can have on this planet,<br>
a taste of heaven.<br>
John McCarthy</p>
</div>
<div class="c-image__video">
<div class="c-image__video-section">
<img src="img/surfer.jpg" alt="" class="surferonBeach">
<p class="c-text-inspiring__surfer">By better understanding the various aspects<br>
of surfing, you will improve faster and have more<br>
fun in the water.</p>
<p class="c-text__read-more" id="expandable-section-1" tabindex="-1">Read More</p>
</div>
<img src="img/surferonwave.jpg" alt="" class="surferonWave">
</div>
<div class="c-shop">
<div class="c-shop__text">
<p>Shop</p>
<h2 class="c-title__shop">Surfboards</h2>
</div>
<div class="c-product">
<div class="c-product__slide">
<ul class="c-product__list fade">
<li class="c-product__background"><img src="img/surfboard2.png" alt=""></li>
<li class="c-product__background"><img src="img/surfboard3.png" alt=""></li>
<li class="c-product__background"><img src="img/surfboard1.png" alt=""></li>
</ul>
</div>
<div class="c-product__slide">
<ul class="c-product__list fade">
<li class="c-product__background"><img src="img/surfboard4.png" alt=""></li>
<li class="c-product__background"><img src="img/surfboard5.png" alt=""></li>
<li class="c-product__background"><img src="img/surfboard6.png" alt=""></li>
</ul>
<div id="c-product__toggle">
test
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Toggle funktion -->
<button class="content-button__toggle" onclick="toggleFunction()">Show</button>
</div>
</div>
<div class="c-surf-training">
<div class="c-text__surf-training">
<h2 class="c-title__surf-training">Surf Training</h2>
<p class="c-text-inspiring__surf-training">By better understanding the varius aspects of surfing,<br>
you will improve faster and have more fun in the water.</p>
<p class="c-read-more" id="expandable-section-1" tabindex="-1">Read More</p>
</div>
<div class="c-surf-training--image">
<img src="img/surferonwave2.jpg" alt="">
</div>
</div>
<div class="c-point-break">
<div class="c-point-break--image">
<img src="img/sunset.jpg" alt="">
</div>
<div class="c-point-break__flex">
<h2 class="c-point-break__title-">Point Break</h2>
<div class="c-point-break__expand">
<p class="c-text-inspiring__point-break">By better understanding the varius aspects of surfing,<br>
you will improve faster and have more fun in the water</p>
<p class="c-read-more" id="expandable-section-1" tabindex="-1">Read More</p>
</div>
</div>
</div>
<div class="c-form">
<h2 class="c-join__title">Join the club</h2>
<p class="c-text-inspiring">Text</p>
<form action="index.html" method="GET" class="c-form__input">
<input id="join-input" class="join-block__input" name="e-mail" type="text" placeholder="Your E-mail">
<button class="o-join__button">
<span class="visually-hidden">Join our newsletter</span>
</button>
</form>
</div>
<div class="c-camp">
<img src="img/campfire.jpg" alt="">
<div class="c-camp-flex">
<p>Our camp</p>
<h2 class="c__">CA 91932, USA Imperial Beach 560 Silver Strand Blvd</h2>
<a href="index.html">Get in touch</a>
</div>
</div>
<div class="c-footer__menu">
<ul class="c-navigation">
<li>Stories</li>
<li>Events</li>
<li>Places</li>
<li>Boards</li>
</ul>
</div>
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("c-product__slide");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
// toggle funktion för hide show surfbrädor
function toggleFunction(){
var x = document.getElementsByClassName("c-product__toggle");
if (x.style.display === "block") {
x.style.display = "none";
}else{
x.style.display = "block";
}
}
}</script>
</body>
</html>
``````````````````````
I want to be able to show the text test and toggle hide show that.
But I get error:
Uncaught ReferenceError: toggleFunction is not defined
at HTMLButtonElement.onclick
答案 0 :(得分：2)
编写toggleFunction函数时，您弄乱了花括号，将其放在内部 showSlides函数中。
更改
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("c-product__slide");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
// toggle funktion för hide show surfbrädor
function toggleFunction(){
var x = document.getElementsByClassName("c-product__toggle");
if (x.style.display === "block") {
x.style.display = "none";
}else{
x.style.display = "block";
}
} // There's an extra curly brace here
}</script>
到
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("c-product__slide");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
} // This curly was missing
// toggle funktion för hide show surfbrädor
function toggleFunction(){
var x = document.getElementsByClassName("c-product__toggle");
if (x.style.display === "block") {
x.style.display = "none";
}else{
x.style.display = "block";
}
}
</script>