Как исправить не отвечающий внешний файл JavaScript, связанный с HTML - PullRequest
Новая
       12

Как исправить не отвечающий внешний файл JavaScript, связанный с HTML

0 голосов
/ 04 апреля 2019

Я пытаюсь создать интерактивное расписание с использованием HTML и (внешнего) JavaScript для проекта класса.Несмотря на то, что я следовал коду, данному моим лектором, JavaScript, похоже, не реагирует на нажатия переключателей.

Это для классного проекта, который будет размещен в Интернете.Я создаю страницу, используя HTML5, W3.CSS и JavaScript.Я пробовал несколько решений для подобных проблем, перечисленных здесь, таких как перемещение тега script вверху (и внизу) тега.Я также попытался удалить тег head безуспешно.

HTML-код: 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Times Tables</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/w3.css">
<link rel="icon" type="image/png" href="images/icon.png">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Arial", sans-serif}
.w3-bar,h1,button {font-family: "Verdana", sans-serif}
<script type="text/javascript" src="jScripts/TimeTableFile.js"></script>
</style>
</head>
<body>

<!-- Header -->
<header class="w3-container w3-light-blue w3-center" style="padding:64px 16px">
  <h1 class="w3-margin w3-xlarge">Times Tables</h1>
</header>

<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container w3-pale-yellow">
<div class="w3-content">
<table>
<tr>
<td>Pick a number</td>
<td>
<select id="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" id="reset" value="Clear"></input></td>
<td><input type="button" id="calc" value="Calculate"></input></td>
</tr>
</table>
<hr>
        <table>         
            <tr>
                <td colspan="2" id="tables"></td>
            </tr>
        </table>
        <hr>
  </div>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-center w3-deep-purple">  
  <div class="w3-xlarge w3-padding-16">
 </div>
 <h6>
    &copy; 2019
 </h6>
 <h6>Website template by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></h6>
</footer>

<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
  var x = document.getElementById("navDemo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

</body>
</html>

Код JavaScript: 

var $ = function(id){
    return document.getElementById(id);
};
var ResetTextfields = function(){
    $("tables").innerHTML ="Please select a number to generate tables";
};
var calculate = function(){
    var number = parseInt($("mySelect").value);
    if(isNaN(number))
        alert("Please select a number from the list");
    else{
        var res = "The "+number+" times tables:<br>";
        for(var i=1; i<=number; i++)
            res+=number+"x "+i+" = "+(number*i)+"<br>";
        $("tables").innerHTML =res;
    }
};
window.onload = function(){
    $("calc").onclick = function(){calculate();}
    $("reset").onclick = function(){ResetTextfields();}
};

W3.CSS - это просто шаблонвзято с веб-сайта w3schools.

Я ожидаю, что когда пользователь нажмет кнопку «Рассчитать»: будет сгенерирована временная таблица, исходя из того, какое число выберет пользователь, и когда нажал «сброс»вкл., страница сбрасывается, так что все предыдущие таблицы исчезают.

Однако, когда я нажимаю на любую из этих кнопок, ничего не происходит.Функция работает отлично, просто кнопки ничего не делают.

Есть ли какая-то конкретная причина, почему это происходит?AFAIK, код все правильно, единственное, что я делаю по-другому, это использование W3.CSS, которое даже тогда не должно влиять на Javascript.Если у кого-нибудь есть какие-либо решения, это будет высоко цениться, спасибо!

1 Ответ

0 голосов
/ 04 апреля 2019

Ваша проблема заключалась в том, что ваш тег <script> (ссылка на ваш файл JavaScript) находился внутри тега <style>, что означало, что он обрабатывался как CSS, а не как разметка HTML.Переместите <script> за пределы <style>, и оно должно работать: 

<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Arial", sans-serif}
.w3-bar,h1,button {font-family: "Verdana", sans-serif}
</style>
<script type="text/javascript" src="jScripts/TimeTableFile.js"></script>
...