Javascript alert causes page content to disappear - javascript

I am using Google Chrome Version 81.0.4044.138.
When I try to open/refresh the html file I have with the following code, the page content does not appear until I click the OK button on the alert dialog. How can I fix this so that the content and the dialog are shown?
I have tried this on MS Edge as well with the same issue...
Any assistance greatly appreciated!
<!doctype html>
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p>Hello World!</p>
<script type="text/javascript">
alert("Hello, World!");
</script>
</body>
</html>

Alert freezes the page by design. You could try modifying your code a bit:
<script type="text/javascript">
window.addEventListener('load', () => {
alert("Hello, World!");
});
</script>

Related

How to disable the back button in the browser without going back?

How to disable the back button in the browser without going back? Below is the way that i have tried.
<html>
<head>
<script>
window.onload = function(){
window.history.forward();
};
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
the best thing you can do is:
window.onbeforeunload = function() { return "your message here"; };
A workaround to "disable" the back button is create a page that redirects you to the page you want to show after a little time.
For example with this code for the first page:
<html>
<head>
<script type="text/javascript">
setInterval(function(){
window.location.href='secondPage.html';
},50);
</script>
</head>
<body>
</body>
</html>
If the user press the back button, the previous page will reopen the desired page.
However, remember that users will hate you for that.

Client-side Javascript can appear where within an HTML document?

Client-side Javascript can appear where within an HTML document?
A. Between the <head> and </head> tags
B. Between the <body>and </body> tags
C. Both of the above
D. None of the above
Here are codes that are placed in the different parts of the HTML. Ever variation will run no matter where the script tag is placed.
1.
<html>
<head>
<title>Foo</title>
<script type="text/javascript">
alert("hello world");
</script>
</head>
<body>
</body>
</html>
2.
<html>
<head>
<title>Foo</title>
</head>
<body>
<script type="text/javascript">
alert("hello world");
</script>
</body>
</html>
3.
<html>
<head>
<title>Foo</title>
</head>
<body>
</body>
<script type="text/javascript">
alert("hello world");
</script>
</html>
If you try out all these 3 variations where the script tags are placed in different parts of the HTML, you'll see that the alert() call will still run; regardless of their position in the HTML document.
So I think the answer to your question is:
C. Both of the above
Since there is no choice that says "Anywhere within the html document"
It is a good idea to place scripts at the bottom of the element.
This can improve page load, because HTML display is not blocked by scripts loading.
You should prefer here:
I chose "C" both of the above because the "Script" can be placed anywhere between the and < / body> as well as the < head> and < / head> It appears the most logical answer to go with in this situation is "C"

How to inject html into webpage with chrome extension on button click

I have this in my popup.html
<!DOCTYPE html>
<html>
<body>
<button id="button">Starting Now</button>
<script src="jquery-2.1.4.min.js" type='text/javascript'></script>
<script src="popup.js" type='text/javascript'></script>
</body>
</html>
This is my popup.js so far...
function dothis(){
/* ??? */
};
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('button').addEventListener('click', dothis);
});
I want to inject a bit of html code into the web page on button click; I've already included it in my manifest. How do I do this? Sorry, I'm new to this! I've looked around on stack overflow, but I could really understand any of the answers. Thanks in advance!
You need a Content Script in order to interact with the page. You can send a message from the popup to the content script with Messaging, then the content script can do the actual interaction with the page.

my console.log does not work in my html page

I am very new to javascript but I can't go forward in learning because my console.log doesn't work AT ALL I will type in the console.log message and on my html page nothing shows up. i have try to debug it but I'm so new I don't know how all I can do is go to the forums and ask, it seem some people have the problem but, there is no good answer to the problem. I've tried every thing i know how to do (which isn't very much) but nothing works PLEASE HELP!!
this is my program
<html>
<head>
<title>My First proper HTML page</title>
</head>
<body>
<h1>Hello</h1>
<p>My First web page.</p>
<script type="text/javascript">
console.log("Hello World!"</script>
</body>
</html>
i know that it has to be in dev tool to see it now but how do i make it show up in the html not in dev.?
there has to be a way!
i now now that document.write is the right way but that isn't working either
<html>
<head>
<title>My First proper HTML page</title>
</head>
<body>
<h1>Hello</h1>
<p>My First web page.</p>
<script>
var name = "Nicholas";
document.write("Hello " + name);
if (name.length > 7 {
document.write("Wow you have a Really Long name!");
}
</script>
</body>
</html>
Technically, console.log is not supposed to show up on your HTML page. Rather, it shows up on your console's (web browser) log.
Even with all the correct answers provided, you can view your answer by visiting the Developer Tool -> Console (For Chrome, on Apple, it's Option + Command + J). For Windows, using Chrome, you hold the following keys: Ctrl+Shift+J
Here is a clip of the code and the log recorded by the console:
because you have to type console.log()
not control.log
Also, console.log needs to be either inside script tags, or in a separate javascript file. In your case you would have to do:
console.log("Hello, World!");
Try the below sample
<html>
<head>
<script type="text/javascript">
console.log("Hello World")
</script>
</head>
<body>
Hello
</body>
</html>
Unless you typed/edited your post.. that has an invalid Javascript.
<html>
<head>
<title>My First proper HTML page</title>
</head>
<body>
<h1>Hello</h1>
<p>My First web page.</p>
<script type="text/javascript">
console.log("Hello World!");
</script>
</body>
</html>
You did not have a closing )
Ah, as others have explained.. Console is not your HTML page, its part of the web browser itself. For example, in google chrome press CTRL+SHIFT+J to show it.
Your after document.write

Javascript - subscribe to an event of a page from another page

I want to be able to open a popup using window.open and subscribe to page events (onload etc) of the popup in the opener. So i'd want a method in my opener (parent page) to execute when the popup's onload or ready fires. Is this possible using plain js or jquery? Pls don't ask me why i want to do this - this can solve a lot of issues for me.
First page (x.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var w = window.open('y.html', 'w');
w.document.getElementById('target').onclick = function () { alert('!'); };
</script>
</body>
</html>
Second page (y.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="target">target</button>
</body>
</html>
Works for me...

Categories