个人中心
gpt4 book ai didi

javascript - 我的音频和搜索功能无法正常使用

转载 作者：行者123 更新时间：2023-12-02 22:30:37 24 4
gpt4 key购买 nike

我正在建立一个快速的网站并测试/试用javascript，html和css，但是遇到了两个错误，我不知道该如何处理。

  • 在带有搜索栏的下拉菜单中，即使未选择搜索项，也会显示可以搜索的项目列表。
  • 我正在尝试在增加计数器时播放音频，但在加载网站时会随机播放音频。
    2a)当您单击增量按钮时，即使使用该按钮通过PlaySound()引用了onclick函数，音频也不会播放。

    • function search()
    {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("pgsearchbar").value;
        filter = input.toUpperCase();
        ul = document.getElementById("searchitems");
        li = ul.getElementsByTagName("li");

        for (i = 0; i < li.length; i++)
        {
            finder = li[i].getElementsByTagName("a")[0];
            letter = finder.textContent || finder.innerText;
            if (letter.toUpperCase().indexOf(filter) > -1)
            {
                li[i].style.display = "";
            }
            else
            {
                li[i].style.display = "none";
            }
        }
    }

    let counter = 0;

    function increment()
    {
        counter++;
        document.querySelector("#counter").innerHTML = counter;
    }

    function PlaySound(soundObj)
    {
        document.getElementById(soundObj).play();
    }

    function reset()
    {
        document.querySelector("#counter").innerHTML = 0;
        counter = 0;
    }
    .pageselector
    {
        position:absolute;
        bottom:10%;
        left:45%;
    }

    .banner
    {
        background-image:url("sky.jpg");
        padding:60px;
        color:lightblue;
    }

    .banntxt
    {
        font-size:50px;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        font-family:"Faster One";
    }

    .navbar-brand
    {
        font-family:"Faster One";
        font-size:25px;
    }

    li
    {
        margin:3px 0;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!DOCTYPE html>

    <html lang="en">
        <head>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
            <link href="styles.css" rel="stylesheet">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
            <title>My Webpage</title>
        </head>
        <body>
            <div>
                <div class="banner">
                    <h1 class="banntxt">abcdefghijklmnop</h1>
                </div>
                <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
                    <span class="navbar-brand mb-0 h1">ABC</span>
                    <h2 style="font-size:26px;">Contact us at: abcdefgh@gmail.com | ###-####-####</h2>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul id="navbaritems" class="navbar-nav">
                            <li class="nav-item active">
                                <button type="button" class="btn btn-info disabled">Home</a>
                            </li>
                            <li class="nav-item">
                                <button onclick="window.location.href='#';" type="button" class="btn btn-info">About me</a>
                            </li>
                            <li class="nav-item">
                                <button onclick="window.location.href='#';" type="button" class="btn btn-info">Blah</a>
                            </li>
                            <li>
                                <form class="form-inline">
                                    <input id="pgsearchbar" class="form-control mr-sm-2" type="search" onkeyup="search()" placeholder="Search" aria-label="Search">
                                    <ul id="searchitems">
                                        <li>
                                            <a href="index.html">Homepage</a>
                                        </li>
                                        <li>
                                            <a href="#">About Me</a>
                                        </li>
                                        <li>
                                            <a href="page2.html">Page2</a>
                                        </li>
                                        <li>
                                            <a href="page3.html">Page3</a>
                                        </li>
                                        <li>
                                            <a href="page3.html">Page4</a>
                                        </li>
                                    </ul>
                                    <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="card text-center" style="width:11rem; left:60px; bottom:-30px;">
                <div class="card-body">
                    <h5 class="card-title">Counter</h5>
                    <p class="card-text" id="counter">0</p>
                    <button onclick="increment(); PlaySound(coin)" class="btn btn-primary">Increment</button>
                    <button onclick="reset()" class="btn btn-danger" style="margin:5px">Reset</button>
                </div>
            </div>
            <div style="position:absolute; bottom:10%; left:48.04%;">
                <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                    <div class="btn-group" role="group">
                        <button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Page 1
                        </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                            <a class="dropdown-item disabled">1</a>
                            <a class="dropdown-item" href="page2.html">2</a>
                            <a class="dropdown-item" href="page3.html">3</a>
                            <a class="dropdown-item" href="page4.html">4</a>

                        </div>
                    </div>
                    <button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
                </div>
            </div>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
            integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
            crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
            integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
            crossorigin="anonymous"></script>
            <script type="text/javascript" src="functions.js"></script>
            <embed src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true">
        </body>
    </html>

    最佳答案

    音频的工作方式有所不同，因为您有一个<embed>标记而不是<audio>标记
    播放音频:
    在按钮上添加:

    <button onclick="increment(); PlaySound('coin')" class="btn btn-primary">Increment</button>
    在音频文件中，替换为音频标签 
    <audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"></audio>

    关于javascript - 我的音频和搜索功能无法正常使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63542805/

    24 4 0
    文章推荐： elasticsearch - ElasticSearch查询带有多个文档的条件
    文章推荐： python-3.x - 如何让 pylint 在 VS Code 中使用 python 3？
    文章推荐： automation - 将密码通过管道传送到 smbpasswd
    文章推荐： elasticsearch - 查询时间上的Latenise token
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com