Unexpected end of input, jquery [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I get the following error: Uncaught SyntaxError: Unexpected end of input for line 1.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./styles/default.css" />
<script src="./scripts/global.js"></script>
<script src="./scripts/jquery.js"></script>
<script>
$( document ).ready(function() {
var array = [ 'body_bg_2','body_bg_3','body_bg_4','body_bg_5' ];
var selected = array[Math.floor(Math.random() * array.length)];
$('<img src="./assets/'+selected+'.gif">').load(function() {
$(this).appendTo('body');
});
}
</script>
<title>Cats!</title>
</head>
I don't understand what the issue is? Anyone know of the solution?

You are missing closing ) of your document-ready handler
Use
<script>
$( document ).ready(function() {
var array = [ 'body_bg_2','body_bg_3','body_bg_4','body_bg_5' ];
var selected = array[Math.floor(Math.random() * array.length)];
$('<img src="./assets/'+selected+'.gif">').load(function() {
$(this).appendTo('body');
});
}); //<== Here you have missed )
</script>

$(document).ready(function () {
var array = [ 'body_bg_2', 'body_bg_3', 'body_bg_4', 'body_bg_5' ];
var selected = array[Math.floor(Math.random() * array.length)];
$('<img src="./assets/' + selected + '.gif">').load(function () {
$(this).appendTo('body');
});
}); /* <--- this is your fail */

Related

Uncaught TypeError: Cannot set property 'innerHTML' of null :( [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
i think that the code 100% normal but why i got that Error????:
Uncaught TypeError: Cannot set property 'innerHTML' of null||
the code is:
<!DoCTYPE html>
<html lang="eng">
<head>
<meta charset ="utf-8">
<meta name="" content="">
<title></title>
<script>
function myAgeInDays() {
"use strict";
var myAge = 15;
return myAge * 365;
}
var daysCalc = myAgeInDays();
document.getElementById("test").innerHTML =
"Your Age In Days = "+ daysCalc+ " Day";
</script>
</head>
<body>
<button onclick="myinfo();">OK</button>
<h1 id="test">Ok</h1>
</body>
</html>
A few things can be done to improve this question:
Give some context, not the error the console prints out
Especially in the case of a very common js error. An example for your case could be "In form submission cannot select html element / selector is null in onclick function".
State some of the things you have tried
This will help you grow as a developer (the old teaching someone to fish story)
Some more tips here: https://stackoverflow.com/help/how-to-ask
In your case, the code you posted does not work (myinfo is not defined) and your code is in the <head> which is defined before the <p> is created. add it at the end of your body to ensure that all the elements are created. If you wanted to make a function handle the button click that contained the logic in your , you would write something like:
<body>
<button id="calcDays">OK</button>
<h1 id="test">Ok</h1>
<script type="text/javascript">
document.getElementById('calcDays')
.addEventListener('click', function () {
function myAgeInDays(days) {
return days * 365;
}
document.getElementById("test").textContent =
`Your Age In Days = ${myAgeInDays(15)} Days`;
});
</script>
</body>

Cannot read property 'addEventListener' of null for to do list [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I'm trying to make to do list but keep getting TypeError: Cannot read property 'addEventListener' of null. I moved my script file to the bottom of the body tag and still get the error. I also tried putting it at the top and using defer and that didn't work. I tried using If(todoBTN) { todoBTN.addEventListener('click', addTodo) and it got rid of the error but when I ran a console.log test I didnt't see it get logged.
const todoBTN = document.querySelector('addtodo-btn')
const inputTodo = document.querySelector('todo-input')
const todoList = document.querySelector('todo-list')
const form = document.querySelector('form')
todoBTN.addEventListener('click', addTodo)
form.addEventListener('submit' , event => {
event.preventDefault();
})
function addTodo() {
// Create Div
const divTodo = document.createElement('div')
divTodo.classList.add('itemsDiv')
// Create To Do Item
const todoItem = document.createElement('li')
todoItem.innerText = inputTodo.value;
divTodo.appendChild(todoItem)
todoList.appendChild(divTodo)
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>To do List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous">
</head>
<body>
<h2>To Do List</h2>
<form class="form">
<input type="text" class="todo-input">
<button class="addtodo-btn" type="submit"><i class="fas fa-plus"></i></button>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="app.js"></script>
</body>
For class selector use . with in queryselector.See usage here
const todoBTN = document.querySelector('.addtodo-btn') // use . here for class
Same for others as well
const inputTodo = document.querySelector('.todo-input')
const todoList = document.querySelector('.todo-list')
const form = document.querySelector('.form')
You forget to add (.) in front of class name.

i need help please check if anything is wrong with the program and please help me correct it [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
<!Doctype html>
<html>
<title>JavaScript Tutorial</title>
<body>
<script language = "javascript">
var cleanCities = ["Cheyenne ","Santa Fe ","Tucson ","Great Falls ","Honolulu"];
var cityToCheck = "Tucson";
if(cityToCheck === cleanCities[i]) {
alert("You are clean");
}
</script>
</body>
</html>
I cannot find the errors
it's a javascript code
<!Doctype html>
<html>
<title>JavaScript Tutorial</title>
<body>
<script language = "javascript">
var cleanCities = ["Cheyenne ","Santa Fe ","Tucson ","Great Falls ","Honolulu"];
var cityToCheck = "Tucson";
if(cityToCheck === cleanCities[i]) {
alert("You are clean");
}
</script>
</body>
</html>
It says there is some problem in line 14
Where is your for loop for which you're an index i? If its removed intentionally then Tucson in your array has a space in the end. Use trim method.
Also language = "javascript" is wrong, its usually type="text/javascript"
The code should be like below:
enter code here
var cleanCities = ["Cheyenne ","Santa Fe ","Tucson ","Great Falls ","Honolulu"];
var cityToCheck = "Tucson";
for(var i=0; i<cleanCities.length; i++) {
if(cityToCheck === cleanCities[i].trim()){
alert('you are clean');
}
}

Date Comparison Angular JS [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
var discover = $filter("date")(new Date('08-24-2015'), "MM/dd/yyyy");
var occur = $filter("date")(new Date('06-07-2018'), "MM/dd/yyyy")
console.log(discover);
console.log(occur);
if (discover < occur) {
console.log('Discover less than occur');
} else {
console.log('No');
}
The result is always No to whatever value I assign to discover variable.
Did I compare it wrong?
I would advise you to use momentJS for date-time operations. It is much cleaner to implement.
To check if a certain time is before or after another time you could use their query functions
moment('2010-10-20').isBefore('2010-12-31', 'year'); // false
moment('2010-10-20').isBefore('2011-01-01', 'year'); // true
// Code goes here
var app = angular.module("app", []);
app.controller("BaseController", function($scope,$filter) {
var discover = $filter("date")(new Date('05-24-2015'), "MM/dd/yyyy");
var occur = $filter("date")(new Date('06-07-2018'), "MM/dd/yyyy")
console.log(discover);
console.log(occur);
if (discover < occur) {
console.log('Discover less than occur');
} else {
console.log('No');
}
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="BaseController">
</body>
</html>

How to do '#somename' like twitter functionality? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to do a functionality like which happens on Twitter.
If I write #J in text box, a list should appear show with autocomplete starting names "Javascript", "Java", "JQuery".
When I select Jquery, it should display in a TextBox. I got the autocomplete code from Jquery. But I am unable to do this '#' functionality.
Below is the code which I have done till now:
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
<script>
var tags = [ "Javascript", "Jquery", "Java" ];
document.getElementById('autocomplete').onkeypress = function (e) {
if (e.keyCode === 64 ) {
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});
}
else
{
return false;
}
};
</script>
</body>
</html>
Try this:
http://jsfiddle.net/gtnf41co/5/
It checks input value starts with #:
if (this.value.search("#") == 0)
then takes out the # in the request term
request.term.replace("#", "")
You can do this with the autocomplete functionality by adding the # symbol to your tags:
<script>
var tags = [ "#Javascript", "#Jquery", "#Java" ];
$( "#autocomplete" ).autocomplete({
source: tags
});
</script>

Categories

Resources