I am beyond new to JavaScript. Having only just differentiated it from Java as a programming language, I have decided to take it up, and want to try out some practical projects. But I have no idea what I'm doing wrong in terms of why my code is just screwing up.
The Idea
At work, I have a system where by simply opening a URL in my browser I can execute a script to reset a batch of ribbon screens. I don't know how the code works, but it does, and I'm happy. But I rather want to have a webpage I can go to that batch opens every webpage. It can be messy; at this point I only want the job done. So from what I understand, I've managed to cobble together some code.
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" />
<title>Ribbon screen batch Reset</title>
<script>
var txt="Success!";
function open()
{
try
{
window.open("test.html");
document.write("<p>",txt,"</p><br />");
}
catch(err)
{
document.write("Something went wrong here.");
document.write("Error description: " + err.message + "\n\n");
alert("Interrupted due to errors. See webpage for details");
}
}
</script>
</head>
<body>
<img src="http://placehold.it/500x150" />
<h1>Ribbon screen batch reset Type 1 </h1>
<p>Version 1.0.3</p>
<button type="button" onclick="open()">Run code</button>
</body>
</html>
I promise you I can't see a problem, I have another document in the same folder called test.html, it's just when I click the button on index.html the button disappears, and I'm left with just a blank page. Help is much appreciated!
Two simple fixes:
1) open is a reserved word; call your function something else.
2) You must name the window, then use that name to manipulate it.
Code:
<html>
<head>
<script type="text/javascript">
var txt="Success!";
function openit()
{
try
{
testwin = window.open("test.html");
testwin.document.write("<p>",txt,"</p><br />");
}
catch(err)
{
document.write("Something went wrong here.");
document.write("Error description: " + err.message + "\n\n");
alert("Interrupted due to errors. See webpage for details");
}
}
</script>
</head>
<body>
<img src="http://placehold.it/500x150" />
<h1>Ribbon screen batch reset Type 1 </h1>
<p>Version 1.0.3</p>
<button type="button" onclick="openit()">Run code</button>
</body>
</html>
Rename your function to something else, like openMyPage. Using onclick="open()" will call document.open
I have no idea what the "ribbon screen" is but your code has a lot of problems.
First, being if you are using document.write() in <header> the outcome is not going to be visible and it's overall bad practice.
Second problem is this is completely wrong document.write("<p>",txt,"</p><br />");
the correct code would be document.write("<p>"+txt+"</p><br />");
Third, is you can write this whole thing as just one short line:
<button type="button" onclick="window.open("test.html")">Run code</button>
Hope this helps,
Cheers
Related
I am a complete beginner to javascript. I am also new to this website. I am asking for help to complete an assignment. I have been trying for more than 4 hours by looking at lecture material and online for a solution. It is causing me a lot of unnecessary stress. Before javascript we only used CSS and Html. I was given 6 javascript tasks to manipulate the html file (taskc.html) already given to me.
The tasks are as follows
Make a statement to change contents of h1 from "Welcome" to "Text"
2nd statement should make an new alert window when the page loads that delivers a message explaining what the page is about
3rd statement should change the title to "text"
4th statement should log the contents (innerHTML) of the first paragraph element in the console.
5th statement should hide the contents of the second paragraph when the page loads
6th statement should change the contents of the header to have a new colour of your choice
Here is that html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
</body>
</html>
Because the actual coding im meant to add is meant to be in the .js file I was given. so I figured I had to link the js file in the html file so I added
<script type="text/javascript" src="taskc.js"></script>
With that out of the way I went to the lecture notes and I thought I would simply need to modify some of the code given to me there like
document.getElementById('demo').innerHTML = 'Hello World!';
When I put this code in brackets I got the error (document is not defined)
I modified it to match the requirements for task 1
here it is
document.getElementById('header').innerHTML = 'text';
I was confused because I didn't know what this error meant and of course Errors and how to fix them are never explained so I had to lookup how to resolve the error.
I found that to fix it I have to declare it as a variable so I ended up doing this.
var document = 'taskc.html';
When I did this for document, alert and console all the errors went away, but when I did a live preview only statement 1 was working
If anyone could help me fix this I would really appreciate because I don't understand enough javascript to be able to complete this in a reasonable amount of time.
So first: Please use Javascript functions to keep your code tidy and clean.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
<script type="text/javascript" src="taskc.js">test();</script>
</body>
</html>
function test(){
alert("This is a test!");
}
Always implement scripts that are document referenced at the bottom of your html.
If you use JQuery you can use following code to check document is loaded:
$(document).ready(function(){
//foo bar
});
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
Hello to all the community.
First of all I'd like to thank everyone for hundreds of great answers I found here in the past. It is probably the first time I don't find one.
I discovered today that my IE11 does not digest $.data() when a page is first opened in its tab. Here's the test code (http://dmit.izihost.com/temp/test_IE11_jQuery.htm):
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#do').data('data1', '1');
$('#do').html($('#do').html() + '<br>Document Ready: ' +
$('#do').data('data1') +
" - Here the data is still present"
);
});
$(window).load(function(){
$('#do').html($('#do').html() + '<br>Window Load: ' +
$('#do').data('data1') +
" - Here in IE11 the data is lost when page is opened for the first time; but present after reloading (F5, Ctrl+F5 etc.) in the same browser tab");
});
</script>
</head>
<body>
<div id="do"></div>
</body>
</html>
Try to open it with IE11 (if you test locally, drag-drop the file into the browser rather than double-click), then refresh the page, then open it again in another tab/instance.
I find nothing of the sort in Google. Can someone please shed the light on this issue? It seems to be rather ugly, unless it's a temporary bug.
Good day!
D
P.S. IE version: 11.0.9600.16518
When I load a page containing e4x in FF 3.5, I get no inkling that e4x even exists in the browser's JS implementation. Notes below, but here's my HTML :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>e4x test</title>
<script type="text/javascript" src="lib/dojo/dojo/dojo.js">
</script>
<script type="text/javascript;e4x=1">
function hello() {
var x = new XML();
x = <foo></foo>
dojo.byId("container").innerHTML = "Print me!" + x.toXMLString();
}
</script>
<script type="text/javascript">
dojo.addOnLoad(hello);
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
When I inspect in firebug, it says x doesn't have a toString() method, and my IDE (aptana) thinks that XML is not an object type. Does anyone have any idea what I'm doing wrong?
I'm guessing that it was working all along, but your browser doesn't recognize a "foo" tag and because it does not know how to render it, it ignores it. By putting something inside of your foo tag you would get content out.
BTW: The new XML() statement is entirely unnecessary. You can just do this:
var x = <foo>bar</foo>;
That will create a new XML object for you. Saying new XML() is like saying new String(). You can do it, but it is just a waste of space.
It turns out that I need more in the XML for it to print anything out. bar works, for example. I'm not sure why, but that is what fixed it!
How can I do a script to catch strings as input and open them on a Firefox document? Each link would go to a different window or tab. Any ideas would be much appreciated.
I just want to be able to take some links and open them. For example I have 50 Links. And copying and parsing those 50 Links take a really long time and also a lot of work. If I can just write a script to read those links and let the computer do the work, it will be very helpful for me. I just don't know how to write that or where because it does not sound too hard (just gotta know how to). Thanks for any suggestions.
if i got you right, i guess you could do something like this. This will open the four urls listed but it will probably be blocked by the popup blocker.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin tÃtulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script>
<!--
var dir = new Array();
dir[0] = "http://www.creativecorner.cl/";
dir[1] = "http://www.sourcing.cl/";
dir[2] = "http://www.feeds.cl/";
dir[3] = "http://www.neonomade.com/";
for(i = 0 ; i < dir.length ; i++){
window.open(dir[i],'autowindow' + i,'width=1024,height=768');
}
-->
</script>
</body>
</html>
Write this to a file names "links.html" on your hard disk:
<html>
<head><title>Your links</title></head>
<body>
Your links:<br />
XXX<br />
</body>
</html>
Replace the two "XXX" with one link and emit one "link" (a) line per link. You should be able to do that in most text editors with a little search'n'replace. After you're done, save the file and open it in your browser.
Another option is to look at the bookmark file of your browser and to duplicate the format. You can usually ignore things like "last visited", etc. Just add the links.
If you want to do this in JavaScript, you will need to use a form with a textarea. Create a small HTML document with a form, the JavaScript, the textarea and a div for the result.
Add a button which calls a JavaScript function which takes the text from the textarea, split it into lines and create the HTML above (only the link-lines) as a String. Now assign this string to the attribute innerHTML of the div to make the links clickable.