I was working on Translate Api App ;
I have get error message as:
" Cannot read property 'addEventListener' of null " .
I still cannot understand why I do have this message. Could any of you help me with that mistake :( I have to get Submit from Form to Input type " submit " . Still could solve...
HTML Codes ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Translator App</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<section class="main">
<div class="header">
<h1>Welcome to Translator</h1>
<h2>Translate in English,Spanish,German,Turkish</h2>
<div class="language">
<div class="languageto">
<select class="firstlanguages" name="languages" id="langs">
<option value="eng">English</option>
<option value="tr">Turkish</option>
<option value="de">German</option>
<option value="sp">Spanish</option>
</select>
</div>
<div class="tolanguage">
<select id="tolanguage" name="tolanguage">
<option value="toeng">Turkish</option>
<option value="totr">English</option>
<option value="tode">German</option>
<option value="tosp">Spanish</option>
</select>
</div>
</div>
<form id="translate-from">
<div class="translate">
<textarea class="firstmsj" name="message" placeholder="Maximum 500 Character" id="message"></textarea>
<textarea class="secondmsj" name="message" disabled placeholder="Your Translate"></textarea>
</div>
<input class="translatebtn" type="submit" value="Translate">
</form>
</div>
</section>
<script src="js/app.js"></script>
<script src="js/translate.js"></script>
</body>
</html>
and here that I have get error message ;
eventListeners();
function eventListeners(){
let form = document.getElementById("translate-form");
form.addEventListener('submit', translateWord); // THİS PART GIVES ME ERROR MESSAGE
document.querySelector('.firstlanguages').onchange = function(){
}
}
const translate = new Translate(document.getElementById("message").value,document.getElementById("langs").value)
function translateWord(e){
e.preventDefault();
}
EXACT ERROR MESSAGE PARTS :
function eventListeners(){
let form = document.getElementById("translate-form");
form.addEventListener('submit', translateWord); // THİS PART GIVES ME ERROR MESSAGE
document.querySelector('.firstlanguages').onchange = function(){
}
}
What shall I do?
