I've got such simple html.
vkbeatuify.js is located in the same folder.
<html>
<head>
<script type="text/javascript" src="vkbeautify.js"></script>
<script>
var variable = vkbeautify.xml("<root><cat></cat></root>");
document.getElementById('data').innerHTML = variable;
</script>
</head>
<body>
<div id="data">
</div>
</body>
</html>
But when I open page in browser Firefox - it displays nothing.
What is the problem?
Related
I have written a JavaScript alert message code it displays the alert message first in both codes 1 and 2 before Html content. What should I do to run the HTML content first and then a javascript code?
Code 1
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script src="text.js"></script>
</body>
</html>
Code 2
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
alert(" This is alert message.");
</script>
</body>
</html>
There is a load event, which will fire AFTER the page is loaded. You can listen to the event:
window.addEventListener('load', function() {
console.log('All assets are loaded');
alert ("This is an alert MSG");
})
You can use setTimeout() for this
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
setTimeout(()=>{
alert(" This is alert message.")
},2000)
</script>
</body>
</html>
You can use window.onload function. This function called after body load.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
window.onload = function () {
alert(" This is alert message.");
}
</script>
</body>
</html>
In your first code just put defer attribute as below
<script defer src="text.js"></script>
A script that will be downloaded in parallel to parsing the page, and executed after the page has finished parsing
for more detail refer to the URL
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
create your Script like below
<script type = "text/javascript">
function displayalert() {
alert ("This is an alert MSG");
}
</script>
add this code in your body(this is a button)
<input type = "button" value = "Click me" onclick = "displayalert();" />
when you click on this button you will see the alert
We are using the onclick attribute and call the displayalert() function where the alert() is defined.
I am unable to get Text from textarea because of some unknown reason, if I try simple textarea without using any javascript library, it is getting text. But when using any library, it shows undefined. Can somebody explain why?
Here is my code:
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="sample">
<!-- <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script> -->
<h1>
Testing page for Text Areas
</h1>
<textarea id="area2" style="width: 80%;">
</textarea><br />
<button type="button" onclick="myFunction()" id="submit_text2"> Submit Email </button>
<p id="demo">jkjnjk</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("area2").value;
document.getElementById("demo").innerHTML = x;
console.log(x);
alert(x);
}
</script>
</body>
</html>
Here, it is getting and showing text in Alert
Now if I uncomment the script to enhance my textarea using
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<h1>
Testing page for Text Areas
</h1>
<textarea id="area2" style="width: 80%;">
</textarea><br />
<button type="button" onclick="myFunction()" id="submit_text2"> Submit Email </button>
<p id="demo">jkjnjk</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("area2").value;
document.getElementById("demo").innerHTML = x;
console.log(x);
alert(x);
}
</script>
</body>
</html>
It has gone blank now, (there is no problem with script, I have tried some other as well!
It's because when you are using "styled textarea" it just create something else on top of your textarea. You need to use [nicInstance].getContent(). You can read niceEditor's docs here
In your case since you haven't saved your instance a variable, you should being able to use nicEditors.findEditor('area2').getContent();
I'm trying to display the below HTML page in Browser. But it shows nothing.
<HTML>
<HEAD>
<TITLE>Code Listing 19-4</TITLE>
<OBJECT ID="Seq1" CLASSID="CLSID:B0A6BAE2-AAF0-11D0-A152-00A0C908DB96">
</OBJECT>
<SCRIPT LANGUAGE="JavaScript">
Seq1.Item("ActionSet1").At(0.000,"showText(`3')",1,0.050,1);
Seq1.Item("ActionSet1").At(1.000,"showText(`2')",1,0.050,1);
Seq1.Item("ActionSet1").At(2.000,"showText(`1')",1,0.050,1);
Seq1.Item("ActionSet1").At(3.000,"showText(`Ta Da!')",1,0.050,1);
function showText(obj){ Span1.innerHTML=obj }
</SCRIPT>
</HEAD>
<BODY onload="Seq1.Item(`ActionSet1').Play()">
<CENTER>
<SPAN ID="Span1" STYLE="font:48pt bold arial;color:red"></SPAN>
</CENTER>
</BODY>
</HTML>
Anyone knows what is the exact issue?
I've read many tutorials and tried them, but they don't work.
Just for example I wrote this simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script>
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
</script>
</body>
</html>
I get Test Message text in my page.
Then I put my JS code to an external file: '/js/js.js'
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
And modify the HTML file to:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/js.js"></script>
</head>
<body>
<p id="testElement"> Html text</p>
</body>
</html>
When I open the HTML file in a browser, I only get Html text. My JS does not work. Please explain what I am doing wrong.
Your problem is that javascript linked in head is executed before the body is loaded, so you can just put the script at the end of the body like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
Check the JavaScript error console.
Your code runs before the document is rendered so the node testElemet doesn't exist.
Either move your script-include down as the last element in the body or wrap your code in a load/ready event.
function on_document_ready(callback) {
if (document.readyState === "complete") {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}
on_document_ready(function () {
var paragraph = document.getElementById("testElemet");
paragraph.innerHTML = "Test Message";
});
This should work fine:
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement">Html text</p>
<script type="text/javascript" src="/js/js.js"></script>
</body>
</html>
Please make sure that <script type="text/javascript" src="/js/js.js"></script> is placed just before </body>.
Try this
var doSomething = function()
{
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js.js"></script>
</head>
<body onload = "doSomething();">
<p id="testElement"> Html text</p>
</body>
</html>
Try saving both the files in the same folder.
Make use of your browsers developer console, to determine whether any errors have occurred.
Regarding 'onload', you can have a look at this link.
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')"></span>
</body>
</html>
Here, I can't understand why it say always
[ReferenceError: view_more is not defined]
I got the same problem today.
My situation was like this:
.html file:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="lc-form-holder">
<form action="#" method="post">
[...]
<span onclick="myFunction();">NEXT</span>
</form>
</div>
</body>
and .js file:
$(document).ready(function() {
function myFunction() {
console.log('click click');
}
});
When I clicked on <span> I got an error Uncaught ReferenceError: myFuncion is not defined.
But when I do this in .js file (no document.ready):
function myFunction() {
console.log('click click');
}
Everything work just fine.
I don't know is this helpful but I wanna share it if someone check this question in future.
Try this first
<body>
<span onClick="alert('1');"></span>
if the above code works then there must exists others javascript which are actually got error prior to execute your code.
<span onClick="view_more('1')">Test</span>
Add text and then click on text
Working at my end
This is my code --
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')">gfgf</span>
</body>
</html>
EDIT
try using this code --
<html>
<head>
<script type="text/javascript">
function view_more(pg_no)
{
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="javascript:view_more('1');">gfgf</span>
</body>
</html>