My javascript code is not responding at all. Even simple codes like alert("Hello World"); both external files and internal scripts, jQuery etc are not all responding
example
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/Animate CSS/animate.min.css">
<link rel="stylesheet" href="./assets/OWL JS/owl.carousel.min.css">
<link rel="stylesheet" href="./assets/Bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="./assets/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 class="animate__animated right-0 wow animate__zoomIn bg-primary"><span class="fa fa-bars"></span> Hello World</h1>
<div class="wow backInRight">
Content to Reveal Here
</div>
<noscript>Hello</noscript>
<script>
new WOW().init();
alert("Hello word");
for (i = 0; i < 10; i++) {
alert("Hello" + i);
}
</script>
<script src="./assets/JQuery/jquery.min.js"></script>
<script src="./assets/Popper JS/popper.min.js"></script>
<script src="./assets/Wow JS/wow.js"></script>
<script src="./assets/Bootstrap/bootstrap.min.js"></script>
<script src="./assets/OWL JS/owl.carousel.min.js"></script>
</body>
</html>```
Related
I can't seem to set this jquery datetimepicker. I believe I am following the instructions correctly. However, only the input box displays. After inspecting I saw these errors in the log
This the plugin I am trying to use.
https://xdsoft.net/jqplugins/datetimepicker/
previous code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="/jquery.datetimepicker.min.css"/>
<script type="text/javascript">
jQuery('#datetimepicker').datetimepicker();
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
<script src="/jquery.js"></script>
<script src="/build/jquery.datetimepicker.full.min.js"></script>
</html>
So I found the original files hereenter link description here
and then changed my code to the following
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>
<script type="text/javascript">
jQuery('#datetimepicker').datetimepicker();
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</html>
but now I have a new error. Any ideas on what I am missing?
Mind the order and dependencies of your scripts and use eventlisteners:
To make it simple:
Load CSS first (DateTimePicker), load JS second (jQuery, Datetimepicker), initialize an eventlistener using $().ready().
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<!-- Load CSS first -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>
<!-- Load JS second -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Initialize JS, setup eventlistener(s) -->
<script type="text/javascript">
jQuery(document).ready($ => $('#datetimepicker').datetimepicker());
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css"/>
</head>
<body>
<input id="datetimepicker" type="text" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> either this or the previous one not both-->
<script type="text/javascript">
jQuery('#datetimepicker').datetimepicker();
</script>
</body>
</html>
The code above will fix all your issues about where to put scripts and what to load (you where both loading the extended and minified version of the library)
See the following snippet:
jQuery('#datetimepicker').datetimepicker();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.3.7/jquery.datetimepicker.min.css" />
<input id="datetimepicker" type="text">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js" integrity="sha512-9yoLVdmrMyzsX6TyGOawljEm8rPoM5oNmdUiQvhJuJPTk1qoycCK7HdRWZ10vRRlDlUVhCA/ytqCy78+UujHng=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> either this or the previous one not both-->
I have an HTA which I am trying to load html content into from an external file. The method of choice is AJAX but unfortunately you cant do that in an HTA. However, I have found a pure javascript method for doing this but I keep getting access denied at the line request.open. Any ideas how to fix this?
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test file</title>
<hta:application id="test app">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<script type="text/javascript" src="resources/js/jquery-3.3.1.js">
</script>
<script type="text/javascript" charset="utf8" src="resources/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="resources/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/navigation.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="resources/css/scroller.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>nav1</li>
</ul>
</div>
<div id="ajaxtest"></div>
<!-- Footer -->
<footer >
<script language="javascript">
function myFunction() {
var request = new XMLHttpRequest();
request.open('GET', 'resources/html/ajaxtest.html', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var resp = request.responseText;
document.querySelector('#div').innerHTML = resp;
}
};
request.send();
}
$('#ajaxjestid').click(function(){ myFunction(); return false; });
</script>
</footer>
</body>
</html>
I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};
You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>
first choice:put script at the bottom of the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>
The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>
Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>
Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">
actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the body.
I have a problem, when i try to make a phonegap build and test it on my android phone javascript don't run.
I have simple config.xml file, and there is a preview of my index.html's head :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>My app</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src = "phonegap.js" > </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Mobile_style.css"><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src = "phonegap.js" > </script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
// do your thing!
}
</script>
<script type="text/javascript">
window.onload = function()
{
MY JS CODE
}
</script>
</head>
<body onload="onBodyLoad()">
MY HTML
</body>
I have two html files, the index.html and the game.html, i have the same links and scripts in the game's head.
i have try to put my code on the but thats not working.
I have search some hours but i can solve the problem.
Thanks for your help !
You should include only one version of jquery. Also you don't need both cordova.js and phonegap.js, choose one script.
Your code may look much more cleaner:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>My app</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="Mobile_style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Device is ready");
}
</script>
</head>
<body>
MY HTML
</body>
</html>
I am currently trying to make codemirror and summernote work, I have followed a online tutorial but there seems to be a problem with the file dependencies. My code is. I have taken the online file urls from summernote's example page, so it should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Code editor</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet"/>
<link href="css/summernote.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<!-- Add custom CSS here -->
</head>
<body>
<div class="row">
<br />
<div class="container">
<div class="col-lg-12">
<form action="">
<div class="form-group">
<label for="">Descriptions</label>
<textarea id="description" rows="10" class="form-control"></textarea>
</div>
</form>
</div>
</div>
</div>
<!-- /.end Footer -->
<!-- /.end container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/summernote.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#description').summernote({
height: 400,
codemirror: {
theme:'monokai'
}
});
});
</script>
</body>
</html>
Any help would be appreciated.... thanks
Refer the following code snippet, it's working perfectly fine for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>summernote</title>
<!-- include jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- include libraries BS3 -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js)-->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<!-- include summernote -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 200,
tabsize: 2,
codemirror: {
theme: 'monokai'
}
});
});
</script>
</head>
<body>
<textarea class="summernote"><p>Seasons <b>coming up</b></p></textarea>
</body>
</html>
Then point the cdn urls to the local file system url where the files are being located.
Use prettifyHtml: false to disable summernote formatting your code
$scope.summernoteOptions = {
height: 690,
focus: true,
prettifyHtml: false,
codemirror: {
theme: 'default',
mode: "text/html",
lineNumbers: true,
tabMode: 'indent'
}
};