Uncaught reference error: quickread is not defined - javascript

I get an UncaughtReferenceError: QuickRead is not defined on line 10 which is QuickRead.applyToLinks();
I am using the script from here http://www.readshout.com/quickread and I believed I followed all the directions it has to use it, yet its not working.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script language="JavaScript" type="text/javascript" src="http://www.readshout.com/bookmarklets/quickread/quickread.js"></script>
<script>
//QuickRead.setFilter('a.my_links');
QuickRead.applyToLinks();
</script>
Give up on google<br />
ycomb exp
</body>
</html>

Works for me. You could however try to add jQuery 1.4.2 manually, as QuickRead seems to dynamically load it. Otherwise try Firebug to find the error.

Related

I get "function is not defined" when I move a Javascript function from in-line code, to a separate js file

I am trying to make a very simple thing work:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="text/js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
With js/test.js being found by the browser and containing:
function test() {
alert("test");
}
When opening the page and clicking the button, nothing happens and I can see in the console:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test:7)
I have tried to move the script import above or under the button, or in the header.
I have tried to use "window.setlocale = function" in my js file.
I have tried to put nothing in the test method.
I checked for errors with JSLint (there is no error).
When I check the source, I can see the js file and the browser opens it when I click on it.
The only way I can get the Javascript to work is to write it inline...
Maybe the issue is with my environment?
In order to run this, I use an Apache server, and it is configured to serve this on localhost:8077. I works fine so far.
I use Laravel 7.10, PHP 7.4... working fine. To run this I created a simple route, that shows the view (a simple index.blade.php) with the HTML content copy/pasted above. It displays fine on "http://localhost:8077/test", no problem.
I also tried to use the laravel notation
<script src="{{ asset('js/test.js') }}" type="text/js"></script>
but it gives the same result.
I also have the PHP debugbar (a Laravel plugin) active, and it does not show any error. The view is properly loaded and displayed.
Also, I use PHPStorm, and it does not detect any issue.
It's been 2 days and I cannot makes this seemingly extremely basic thing to work, please help me m(_ _)m
Your script type is wrong. Use application/javascript in your script element to make your javascript work - or better yet, remove the type attribute and let browsers auto-detect the type:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="application/javascript"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
Without type attribute:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
you can try to add script tag to header tag. like this
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
Try removing the function name in js/test.js
function() {
alert("test");
}
Please add the js file as a reference in the header section of your core file. External referencing.

Uncaught TypeError: google.translate.TranslateService is not a constructor

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p>Привет Мир!</p>
<script type="text/javascript">var gtElInit = function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('ru', 'en', function () {});}</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=gtElInit&client=wt"></script>
</body>
</html>
Example 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p>Привет Мир!</p>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=gtElInit&client=wt"></script>
<script type="text/javascript">var gtElInit = function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('ru', 'en', function () {});}</script>
</body>
</html>
When run this page localy from desktop in Chrome - it works (russian words after page page load translate to english). So it works well in snippet here!
But when put page to website and run like normal site from web - it DONT WORK (russian words dont translate). Webpage here: http://www.shram.kiev.ua/bak/1.shtml
Error: Uncaught TypeError: google.translate.TranslateService is not a constructor
I really dont know js but i trully need fix. Help pls. And pls give fix to my topic, because i read all topics about "is not a constructor" but dont understand :(
You need to load the translate library before you try to use it. On an HTML page, <script> tags are loaded in the order they appear, so you need to move the script tag loading Google translate above the script tag where you are trying to use it.

alert is executing before html loads

Hello my questions is about how a webpage is loaded! Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
alert("Why?");
</script>
</body>
</html>
I cannot for the life of me figure out why the alert is running before the heading is displayed. It is my understanding that since the alert is right above the closing body tag it will be the last thing run. Why is the page waiting for me to close out the alert before displaying the heading?
Thanks for the help!
Edit: I ran this code in firefox rather than chrome and it worked how I wanted it to - the heading displayed first before the alert ran.
You need to execute your script after the page loads with
<body onload="script();">
An external script will execute before the page loads.
<body onload="script();">
<h1>Waiting</h1>
<script type="text/javascript">
function script() {alert("Why?");}
</script>
</body>
You can use setTimeout() to show the alert after a few seconds (when the page should have loaded).
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
setTimeout(function(){
alert("Why?");
}, 1000);//wait 1000 milliseconds
</script>
</body>
</html>
You can check if the header (the h1 tag) is there and only alert if it is there.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1 id="header">Waiting</h1>
<script type="text/javascript">
var x;
x = setInterval(function(){
if(document.getElementById("header")){
alert("Why?");
clearInterval(x);
}
}, 100);
</script>
</body>
</html>
The simplest workaround code without using JQuery I could write is this. Please check it.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
window.onload = function(){
setTimeout(()=>{
alert("Why?");
},10)
}
</script>
</body>
</html>
The cleanest way to do this seems like it would be to put your javascript in a separate file, and load it with the defer attribute. This will cause it to fire after the DOM loads (technically, just before DOMContentLoaded, but it doesn't work consistently across browsers unless there is a src attribute, which is why you would need to move it to an external file.
<script src="myScript.js" defer></script>
Oddly, adding some CSS to your heading could also affect this since JS is supposed to execute in order after any pending CSS.
The timeout function or a $(document).ready() function will do what you need in theory, but a timeout could need to be adjusted based on the complexity of the page, and if you aren't already using jQuery, you probably won't want to add it just to use $(document).ready().

jquery.printElement not responding at all

I've been trying to use the jquery.printElement plugin but nothing happens when I click on the Print link, except for this error message in the console:
Uncaught TypeError: Cannot read property 'opera' of undefined
The code I'm using is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Print</title>
</head>
<body>
<p id="content">Some text to print</p>
Print
<script src="../common/js/jquery-1.10.1.min.js"></script>
<script src="../common/js/jquery.printElement.js"></script>
<script>
$('#printIt').click(function() {
$('#content').printElement();
});
</script>
</body>
</html>
Anyone know why this is happening?
The printElement plugin uses jQuery.browser internally, and $.browser has been deprecated and removed in the version of jQuery you're using.
You have to use an older version of jQuery, or possibly the migrate plugin to make printElement work.
wrap code inside document.ready.
$(function()
{
$('#printIt').click(function()
{
$('#content').printElement();
});
});

JQUERY won't work on local machine

I'm trying JQUERY on my machine, but for some reason, nothing seems to work. Here's the test file:
<html>
<head>
<script type="text/css" src="jquery.js">
</script>
<script type="text/javascript">
$("p").mouseover(function () {
$(this).css("color","black");
});
$(document).ready(function(){
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
</head>
<body>
<h1>This is a test</h1>
<p>Roll over me!</p>
</body>
</html>
Nothing in there works. Also, if anybody wants to know, accessing through my domain and through the local both don't work. I'm really confused, because I copied most of that code off the internet, just in case there was something wrong with my typing.
For some reason, firefox is throwing this error:
Code: Evaluate
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
New code (moved the p onmouseover handeler)
<script src="jquery.js" type="text/css">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
Specify correct type for javascript file:
<script type="text/javascript" src="jquery.js"></script>
Update
You're currently using type="text/css" as content type for javascript file which is incorrect. Try to copy above code into your script.
Screenshot
removed dead ImageShack link
Install firebug and see what it tells you in the Console tab.
You should move the attachment of the mouseover handler into $(document).ready(...) because the paragraph won't necessarily exist until the document is ready and so no handler can be attached to it.
Download the latest version of jQuery "jquery-1.3.2.min.js" and link the file correctly. and try this,
<script type="text/javascript">
$(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>

Categories

Resources