未捕获的ReferenceError：未在HTMLButtonElement.onclick上定义toggleFunction

Question

I try to fix this code soo the click funktion for toggle works but I get the error Uncaught ReferenceError: toggleFunction is not defined at HTMLButtonElement.onclick 我尝试修复此代码，从而使切换功能的点击功能起作用，但出现错误Uncaught ReferenceError：HTMLButtonElement.onclick中未定义toggleFunction

Its sure very easy to fix but I cant find the problem. 它的确很容易修复，但我找不到问题。

I have tried to change the document.getElementsByClassName to document.getElementsById but it didnt work. 我试图将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)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</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

Answer 1

You messed up the curly braces when you wrote the toggleFunction function, you placed it inside the showSlides function. 编写toggleFunction函数时，您弄乱了花括号，将其放在 showSlides函数中。

change 更改

<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>

to 至

<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>

未捕获的ReferenceError：未在HTMLButtonElement.onclick上定义toggleFunction

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-05-01 07:44:41

未捕获的ReferenceError：未在HTMLButtonElement.onclick上定义toggleFunction

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-05-01 07:44:41

解决方案1
2 已采纳 2019-05-01 07:44:41