Как использовать код JavaScript из js-файла

Я пытаюсь использовать код JavaScript из файла .js. Мой код отлично работает, когда я сохраняю этот код в файле .html в тегах сценария.Как использовать код JavaScript из js-файла

Какие изменения следует внести, если я переведу скрипт в файл .js.

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Cat Clicker</title> 
    <script type="text/javascript" src="js/app.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
    <div id='cc'><img src="images/cat1.png"><br /></div> 
    <div>The number of times you clicked the cat is:</div><br /> 
    <div id='times'>0</div> 
</body> 
</html>

JS:

var pic = document.getElementById('cc'); 
pic.addEventListener('click', function() { 
    var count = document.getElementById('times').innerHTML; 
    count = parseInt(count) + 1; 
    document.getElementById('times').innerHTML = count; 
}, false);

источник

2015-04-11 Ejaz

Вы пробовали что-нибудь? –

Вы должны обернуть этот код внутри window.onload, чтобы запустить его после того, как все элементы DOM загружены.

window.onload = function() { 
var pic = document.getElementById('cc'); 
pic.addEventListener('click', function() { 
    var count = document.getElementById('times').innerHTML; 
    count = parseInt(count) + 1; 
    document.getElementById('times').innerHTML = count; 
}, false); 
}

Else просто переместить тег сценария в нижней части страницы чуть выше </body>

<!DOCTYPE html> 
<html> 
<head> 
    <title>Cat Clicker</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
    <div id='cc'><img src="images/cat1.png"><br /></div> 
    <div>The number of times you clicked the cat is:</div><br /> 
    <div id='times'>0</div> 
    <script type="text/javascript" src="js/app.js"></script> 
</body> 
</html>

источник

2015-04-11 11:09:04 mohamedrias

Вполне возможно, что ваш код JavaScript пытался получить элемент, который не был вынесенное в браузере.

Решение # 1

Вы можете попытаться загрузить файл JavaScript после всех элементов были оказаны, как это:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Cat Clicker</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
    <div id='cc'><img src="images/cat1.png"><br /></div> 
    <div>The number of times you clicked the cat is:</div><br /> 
    <div id='times'>0</div> 
    <script type="text/javascript" src="js/app.js"></script> 
</body> 
</html>

Решение # 2

Вы можете также попробовать использовать jQuery и сделать следующее:

$(function(){ 
    // and also convert this to its jQuery counterpart 
    var pic = document.getElementById('cc'); 
    pic.addEventListener('click', function() { 
     var count = document.getElementById('times').innerHTML; 
     count = parseInt(count) + 1; 
     document.getElementById('times').innerHTML = count; 
    }, false); 
})

Если это не сработает, попробуйте использовать инструменты для разработчиков Chrome и проверить, если JS/app.js указывает на JavaScript файл

источник

2015-04-11 11:08:51

Как использовать код JavaScript из js-файла

ответ

Смежные вопросы