Question

我的html页面中有五个按钮。我曾经用javascript创建了四个，用html创建了一个，但经过各种更改决定用html创建所有这些。问题是以前我的所有按钮工作得很好，但在更改之后，以前由javascript制作的按钮不再起作用了。我对所有按钮使用getElementById（“”）。onclick = function（），但只有其中一个按钮有效。（我只为四个按钮之一制作了功能，因为我遇到了这个问题）

这是两个按钮的javascript。 button1是一个不起作用的，我甚至试过在函数内部只有console.log（），但它没有做任何事情。

        document.getElementById("button1").onclick = function(){var element = document.getElementById('presetPicker');element.value = this.value;providerManager.refreshProviders();};
        document.getElementById("DownloadXml").onclick = function (){createReport('http://192.168.0.101:8080/rest/v1/excel-reports/run/XLT_211607',verifyReport)};

这是页面的html部分

<body>
    <div id="container1">
        <header>
            <img src="http://www.jamk.fi/globalassets/tietoa-jamkista--about-jamk/materiaalit-esitteet-asiakaslehdet-ja-logot/jamkin-logot/jamk_fi--tunnus/jamkfi_tunnus_sininen_suomi.png" alt="Jamk logo" style="width:50%;height:50%;margin-left:25%;"> 
        </header>
        <div id="container2">
            <div id="textContainer">
                <h2>Fosfaattifosfori PO4-P [mg/l]</h2>
            </div>
            <div id="Graafi"></div>
            <div class="input">
                <div id="buttonContainer1">
                    <ul id="buttonList" class="timeForm">
                        <input id="button1" type="button" class="buttonGroup1" value="Previous day"
                        ><input id="button2" type="button" class="buttonGroup1" value="Previous week"
                        ><input id="button3" type="button" class="buttonGroup1" value="Previous month"
                        ><input id="button4" type="button" class="buttonGroup1" value="Previous year">
                    </ul>
                </div>
                <div id="buttonContainer2">
                    <div id="list">
                        <ul id="downloadList">
                        <input id="DownloadXml" type="button" value="Download" />
                        </ul>
                    </div>
                    <div id="download_div">
                        <img id="loading_gif" src="/modules/dashboards/web/public/359.gif" alt="Loading" style="display:block;">
                    </div>
                </div>
                <iframe id="download_frame" style="display:none;"></iframe>
            </div>
            <div class="testi">
                <select id="presetPicker" class="testi" ></select>
            </div>
            <footer>
            </footer>
        </div>
    </div>
</body>

Answer 1

通过向选择添加选项<option value="Previous day">Previous day</option>，您的代码将再次运行。因此，无论是问题还是我无法检查的函数providerManager.refreshProviders();，都会给您带来问题。

Answer 2

请您提供一个jsFiddle示例？我认为你在绘制DOM元素之前加载脚本。也许$（文件）.ready（）应该解决。

Answer 3

我发现了问题。看起来代码本身没有问题，但是我使用Firefox Web控制台进行调试，并且由于某种原因它没有注册任何console.log（）命令。在使用浏览器控制台调试后，我找到了调试数据。

现在感到非常惭愧

编辑：我应该删除这个问题还是让它留在这里提醒每个初级开发人员怀疑他们的调试工具？

getelementbyid（）。onclick适用于一个按钮但不适用于另一个

3 个答案: