I'm building a C# app (WinForm). I have a javascript component that changes the background color of the webpage. If I put the JS directly into the HTML file it works (ie the background color of the webBrowser appears red).
<!DOCTYPE html>
<<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<HR>
<script>
var setBackColor = function () {
document.body.style.backgroundColor = "red";
}
setBackColor();
</script>
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
<P> This is a new paragraph!
<P>
<B>This is a new paragraph!</B>
<BR><B><I>This is a new sentence without a paragraph break, in bold italics.</I></B><BR>
<HR>
</BODY>
</HTML>
When I put the JS in an external file and try to access it through the path shown, I get an error that reads...
"The value of the property 'setBackColor' is null or undefined, not a Function object."
<!DOCTYPE html>
<<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<HR>
<script type="text/javascript" src=c:\users\local user\documents\visual studio 2015\Projects\HTMLTestApp\HTMLTestApp\Scripts\JavaScript1.js></script>
<body onload="setBackColor()"></body>
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
<P> This is a new paragraph!
<P>
<B>This is a new paragraph!</B>
<BR><B><I>This is a new sentence without a paragraph break, in bold italics.</I></B><BR>
<HR>
</BODY>
</HTML>
I am a complete novice coder, so I don't know what I am doing wrong.
Okay this is more of an HTML and javascript thing than it is a web browser control thing.
Take a look at w3schools on the src attribute of scripts.
So first off, you will need the URL for your src attribute in quotes.
Secondly people usually have some kind of directory structure setup with the webpages so they normally use relative paths so that when they copy over from Dev environment on to their webserver it still works.
So if your script folder is one below the folder with the HTML in it then you would use this as your script tag :
<script src="Scripts/JavaScript1.js"> </script>
Also you have your body tag declared twice. That is too many times.
Related
Let's say I start with a markdown file I made in typora...then I export it as a simple HTML file without anything fancy. The HTML file is a simple html document that only contains headers h1 to h5 and text for each header level...
Is there a simple way to automatically create a "document map" based on the html headings that is attached to the left side of the html document the same way as it is in document maps in microsoft word, acrobat reader? Looking for simplest solution.
For instance, maybe i can cut and paste a small javascript program to query the heading tags and display them on the side?
Or maybe I can write a python, perl, or powershell script to read all the header tags and put links on the side by producing a new html document?
May the simplest method win..
<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<title>sample</title>
</head>
<body><p> </p>
<p> </p>
<h1 id='heading-1'>heading 1</h1>
<h2 id='apples'>Apples</h2>
<p>Apples are tasty</p>
<h3 id='mcintosh'>McIntosh</h3>
<h3 id='gala'>Gala</h3>
<h3 id='red-delicious'>Red Delicious</h3>
<h2 id='pears'>Pears</h2>
<p>Pears are green</p>
<h2 id='oranges'>Oranges</h2>
<p>oranges are orange</p>
<p> </p>
</body>
</html>
Here's what I want my document to look like in HTML using the simplest javascript code possible
Turns out you don't need to write code, Its even easier than I thought:
From Typora:
File->Preferences->Export->HTML->"Check Include Outline Sidebar"
I'm a student who's only just started coding and I've got a project due soon. I tried adding script to my project and absolutely nothings worked. So, I tried stripping it down and making a button which changes the background colour, even that failed to work. Idk if it's visual studios being bugged out or my code itself. I'll post the code and what the debugger thing says. Any help would be cool.
<html>
<head>
<meta charset="utf-8">
<title>Chinese Numbers</title>
</head>
<body>
<p><b> Chinese Numbers </b></p>
<input id="btnPlay" type="button" value="Play" onclick="btnPlay_OnClick" >
</body>
</html>
<script>
function btnPlay_OnClick() {
document.bgColor = "red";
}
</script>
'iexplore.exe' (Script): Loaded 'Script Code (Windows Internet Explorer)'.
The program '[16476] iexplore.exe' has exited with code 0 (0x0).
The program '[15132] iisexpress.exe' has exited with code 0 (0x0).
Your script is outside of the <html> and <body> tag. This means that the script will not be executed in the context of the document.
Instead move your script inside the <body> tag, preferably before the closing </body> tag.
Also document itself has no styles, as it refers to the context of the current document but is not an element by itself.
The document object does have a body property which refers to the <body> element in your document.
To change the background color of the body you need to access the style property of the body property and set the backgroundColor property to a certain color.
<html>
<head>
<meta charset="utf-8">
<title>Chinese Numbers</title>
</head>
<body>
<p><b> Chinese Numbers </b></p>
<input id="btnPlay" type="button" value="Play" onclick="btnPlay_OnClick" >
<script>
function btnPlay_OnClick() {
document.body.style.backgroundColor = "red";
}
</script>
</body>
</html>
This is my HTML file.
<body>
<header>
<h3 id = "TestID"> Test </h3>
</header>
</body>
<script src = "MessagingPage.js"></script>
This is my JS file
document.getElementById("TestID").addEventListener("load", function(){
this.innerHTML("Hi");
})
document.write("Hello World");
Now, when I load the HTML, I get "Test" in the browser. However, what needs to be there is "Hi". I do not understand why this happens. Can you please help me understand? I am just getting started, so please explain in simple terms.
Thanks for taking the time to read through this :)
You have two problems.
Only elements which load external content have a load event (such as an iframe or img).
The h3 isn't loading any external content so has no load event.
Perhaps you should bind your event handler to the window.
innerHTML is a string, not a function.
addEventListener("load", function() {
document.getElementById("TestID").innerHTML = "Hi";
})
document.write("Hello World");
<header>
<h3 id="TestID"> Test </h3>
</header>
<script src="MessagingPage.js"></script>
Including the script inside <body> and updating the JS file will resolve the problem.
Here is the example of working code:
Updated HTML:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<header>
<h3 id = "TestID"> Test </h3>
</header>
<script src = "/MessagingPage.js"></script>
</body>
</html>
Updated JS:
// MessagingPage.js
document.getElementById("TestID").innerHTML = "Hi"
document.write("Hello World");
Output:
I'm currently facing a situation where I get a whole HTML document as part of a JSON object and would like to let the user edit it in a WYSIWG fashion. My current approach is to use TinyMCE but I'd be open for other suggestion as well.
The problem I'm facing using TinyMCE is that that part of the document is being lost if a user edits it. Would anyone know a solution to work around this?
The below example contains a string with a simple HTML document that is being displayed within the textarea. After the documents loads, you will see that the area contains the whole document. If you continue to click on the "Init" button, it will initialize TinyMCE and you will find that the markup is being read and that you can even change it. The problem is that, regardless of whenever you press save or view the source using the options in "tools", only the body part of the document remains.
The document is actually a out of office message from exchange. The original code is a bit more complex but this is a minimal working example I came up with.
So would anyone happen to know how I could enable a user to still be able to do some formatting in a WYSIWG fashion while also preserving the original HTML markup that is being loaded? That primarily means including the html, head etc. tags.
<!DOCTYPE html>
<html>
<head>
<script src="http://cloud.tinymce.com/stable/tinymce.min.js"></script>
</head>
<body>
<button onclick="tinymce.init({ selector:'textarea', plugins:'code' })">Init</button>
<button onclick="tinyMCE.editors[0].save()">Save</button>
<button onclick="tinyMCE.editors[0].remove()">Remove</button><br />
<textarea id="editorArea" style="width: 100%;" rows="15"></textarea>
<script>
var htmlElements = `
<html xmlns:o="urn:schema-microsoft-com:office:office">
<head>
<style>
body{font-family: sans-serif; font-size: 55pt;}
</style>
</head>
<body>
<div>
<span style="font-size: 7pt">Here is some text.</span>
</div>
</body>
</html>`;
document.getElementById("editorArea").innerHTML = htmlElements;
</script>
</body>
</html>
The fullpage plugins allows someone to work with the entire HTML document when looking at the code view of the content:
https://www.tinymce.com/docs/plugins/fullpage/
When you then save the content you should get back the entire document.
I don't know whether this is the best approach or not. But this is what i did in one of my project. My use case was to render markdown text or html on browser and it should be editable. I used showdown.js in this case, you are free to choose any library.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js">
</script>
</head>
<body>
<br />
<div id="editorArea" contentEditable="true" style="width: 100%;"></div>
<script>
var htmlElements = `<html>
<head>
<style>
body{font-family: sans-serif; font-size: 55pt;}
</style>
</head>
<body>
<div>
<span style="font-size: 7pt; color: #dd0000;">Here is some editable text.</span>
</div>
</body>
</html>`;
var converter = new showdown.Converter(),
text = htmlElements,
output = converter.makeHtml(text);
document.getElementById("editorArea").innerHTML = output;
</script>
</body>
</html>
I am fairly new to CSS and javascript. I have been trying to implement the Tagging system as provided in Taggle.js (http://sean.is/poppin/tags).
Using this script :
<html>
<body>
Hello!! <br>
<form id="form1" action="http://127.0.0.1:5000/post">
<fieldset>
Tags:
<div id ="freeTags" ></div>
<p id='tag'></p><br><br>
</fieldset>
</form>
<script src="./node_modules/taggle/assets/js/taggle.js"></script>
<script>
var text = document.getElementById('tag');
new Taggle('freeTags', {
onTagAdd: function(event, tag) {
text.innerHTML = "You just added " + tag;
},
onTagRemove: function(event, tag) {
text.innerHTML = "You just removed "+ tag;
},
duplicateTagClass : "bounce"
});
</script>
</body>
</html>
I am unable to get the same effect as on the website (fancy text box) instead what I have been getting is this:
And it is also not implementing the 'bounce' function although I installed bounce.js using bower.
I think it must be the issue of CSS linkage to HTML. Can any one help in untangling this issue?
The documentation for taggle says the bounce effect is handled by the taggle.css file ... which your code example above doesn't include. Suggest this file also deals with styling of the elements youve said are missing. So just link this file in your document and re - test.
Find the CSS file in the repo you link to above the folder assets/css/ (find here), and save either taggle.css or taggle.min.css (for production) to your server and add the following to your page immediately after the <html> opening tag...
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/taggle.min.css">
</head>
<body>
<!-- your content... -->
</body>
</html>