JavaScript 未与我的 HTML 文件通信

Question

我的 HTML 文件有一个配置文件和帮助按钮，我的帮助按钮包含一个带有问题和 3 个按钮的模式。如果您选择“是”按钮，它应该会增加配置文件按钮表中的正确答案。反之亦然，对于错误答案的“否”按钮。

    <!-- pretty buttons  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
    <!-- MY Script JS -->
<script src=".\script.js"></script> 
 
<html lang="en">

<!-- Create Navigation Buttons -->
<div class="NavBar">
   <button type="button" class="btn btn-profile" data-toggle="modal" data-target="#profileMod" title="Profile101" data-content="Hehehe">Profile</button>
   <button type="button" class="btn btn-help" data-toggle="modal" data-target="#helpMod" title="Help101" data-content="Hohohoho">Help</button>
</div>

<!-- Profile Statistics | Modal -->
<div id="profileMod" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Profile Stats</h4>
        </div>
        
        <!-- table display -->
        <div class="modal-body">
            <table>
                <tr> 
                    <th>Right Answers:</th> 
                    <th>Wrong Answers: </th>
                </tr>
                <tr> <!-- Record of Questions-->
                    <td><input type="number" id="outputright" value=0 readonly> </td>
                    <td><input type="number" id="outputwrong" value=0 readonly> </td>
                </tr>
            </table>
        </div>
    </div>

    </div>
</div>

<!-- Help Modal -->
<div id="helpMod" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Test Question Modal</h4>
        </div>
        
        <!-- Question answers -->
        <div class="input-group">
            <p>Do you agree?</p>
                <button id="right" type="button" class="btn" data-dismiss="modal">Yes</button>
                <button id="wrong" type="button" class="btn" data-dismiss="modal">No</button>
                <button type="button" class="btn">Maybe</button>
        </div>
    </div>

    </div>
</div>

我的 script.js 被读取到 HTML 文件中

    <!-- MY Script JS -->
<script src=".\script.js"></script>

我的 script.js 如下：

/* Profile Statistic Counters */

let rightCount = 0;
let wrongCount = 0;

function getRight() { return rightCount; }
function getWrong() { return wrongCount; }

function right() { rightCount++; }
function wrong() { wrongCount++; }

/* whatever is 'right' & 'wrong' answer | assign ID value */
const rightInc = document.getElementById("right");
const wrongInc = document.getElementById("wrong");

/* display amount of 'right' & 'wrong' answers */
const rightAns = document.getElementById("outputright");
const wrongAns = document.getElementById("outputwrong");

/* when clicked, increment based on 'right' & 'wrong' */
rightInc.addEventListener("click", ()=> {
    right();
    rightAns.value = getRight(); // Count updated
    //localStorage.setItem("answer", "right"); // Updating data
});
wrongInc.addEventListener("click",  ()=> {
    wrong()
    wrongAns.value = getWrong(); // Count updated
    //localStorage.setItem("answer", "wrong"); // Updating data
});

当我在 <\script> HTML 标签下输入 script.js 时，它可以正常通信，但是当它位于同一文件夹中的单独文件中时，它拒绝通信。我还尝试以不同的方式读取我的脚本文件。我的 script.js 在没有 .\ 的 HTML 文件中读取，但不成功

    <!-- MY Script JS -->
<script src="script.js"></script>

所有 ID 都经过三重检查，并在脚本 HTML 标签中输入，证明我的代码正常工作。我只是有点不明白为什么它不能正确沟通。

当在我的网络浏览器中检查 DevConsol 时，它声称我的 addEventListener 语法不正确，特别是在我的 JS 中的以下两个函数中

/* when correctincrement based on 'right' & 'wrong' */
rightInc.addEventListener("click", ()=> {
    right();
    rightAns.value = getRight(); // Count updated
    //localStorage.setItem("answer", "right"); // Updating data
});
wrongInc.addEventListener("click",  ()=> {
    wrong()
    wrongAns.value = getWrong(); // Count updated
    //localStorage.setItem("answer", "wrong"); // Updating data
});

JavaScript 未与我的 HTML 文件通信

问题描述投票：0回答：1

1个回答

最新问题

JavaScript 未与我的 HTML 文件通信

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1