Based on this http://qnimate.com/creating-a-wysiwyg-html-editor/ example created short code
<!doctype html>
<html>
<head>
<title>WYSIWYG Editor</title>
</head>
<body>
<button onclick="displayhtml()">Display HTML</button>
<div class="editor" style="width: 50px; height: 100px; background-color: white; border: 1px solid grey;" contenteditable="true" spellcheck="true">
</div>
<div class="htmloutput">
</div>
<script>
function displayhtml() {
document.getElementsByClassName("htmloutput")[0].textContent = document.getElementsByClassName("editor")[0].innerHTML;
}
</script>
</body>
</html>
On local computer created index file inside wamp/www and pasted the code.
Inside class="editor" typed Enter text Enter. Then clicked on button onclick="displayhtml()"
And i see
<div><br></div><div>text</div><div><br></div>
instead of expected <br>text<br>
Tried here http://jsfiddle.net/24fyrhga/6/
All ok.
Why on local computer i see these divs and how to remove them?
Related
Using JavaScript (or jQuery), create a variable called “myName” and set the value to your “myName”
Create a , that when you click it, it displays an alert with your “myName” variable.
Here is the problem I am currently working. I am super new to this and just trying to figure this out. Here is the code I currently have, when I click the button it displays nothing.
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick=var "myName"Woolley>Button</button>
</body>
</html>
java script
var "myName"
"Woolley"
you can check below code to change the value
<p id="changeName">Mark</p>
<button type="button" class="myevent">Button</button>
<script>
jQuery(function(){
$('.myevent').on('click', function(){
var name = "John Doe";
$('#changeName').val(name);
});
});
</script>
This is Jquery function please inlcude jquery library before use this.
Using pure Javascript:
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<script>
function displayName(){
var myName = "Woolley";
alert(myName);
}
</script>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick="displayName()">Button</button>
</body>
</html>
To make the onclick on your button do something, tell the onclick what to do when triggered; In this case, I told it do execute the function myFunction.
In this function, create your variable and alert it using alert()
function myFunction() {
var myName = "Woolley";
alert(myName);
}
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick="myFunction()">Button</button>
</body>
</html>
If you don't want to use a function, you can also tell onclick to execute alert() without a function:
<button type="button" onclick="var myName = 'Woolley'; alert(myName);">Button</button>
Please note that you need to use " and ' properly, otherwise your HTML is invalid and can't execute your JavaScript.
So a little lost here, I'm not sure how to approach this, I've done the HTML and CSS but not sure how to do it in JS.
My HTML:
<!doctype html>
<html lang="en">
<head>
<title> Task 1 </title>
<meta charset="utf-8">
<script src="DomNodes.js"></script>
<style>
#output {
border: blue 5px solid;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;
width: 50%;
}
#output p {
padding:10px;
border: black 1px dashed;
}
</style>
</head>
<body>
<h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2>
<p> Type in text below, click add to add as paragraph. <button id="add"> ADD </button> </p>
<textarea id ="input" rows="10" cols="60">
</textarea><br>
<button id="delete">Delete Last Paragraph</button>
<br><br>
<h2> Added Paragraphs </h2>
<div id="output">
</div>
</body>
</html>
This is the code with little explain
<!doctype html>
<html lang="en">
<head>
<title> Task 1 </title>
<meta charset="utf-8">
<!--<script src="DomNodes.js"></script>-->
<script>
function myFunction() {
//get input user
var userInput=document.getElementById("input").value;
//clean text area
document.getElementById("input").value="";
//create paragraph
var para = document.createElement("p");
//assign value ->user input
var node = document.createTextNode(userInput);
//assign text at paragraph
para.appendChild(node);
//assign paragraph at div tag
var element = document.getElementById("output");
element.appendChild(para);
}
function remove_LastChild() {
//get div output
var select = document.getElementById('output');
//control if there are child into output div
if (select.childElementCount>0){
//select last paragraph and remove it
select.removeChild(select.lastChild);
}
else{
alert("Tehere are not paragraph!");
}
}
</script>
<style>
#output {
border: blue 5px solid;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;
width: 50%;
}
#output p {
padding:10px;
border: black 1px dashed;
}
</style>
</head>
<body>
<h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2>
<p> Type in text below, click add to add as paragraph. <button id="add" onclick="myFunction()"> ADD </button> </p>
<textarea id ="input" rows="10" cols="60">
</textarea><br>
<button id="delete" onclick="remove_LastChild()">Delete Last Paragraph</button>
<br><br>
<h2> Added Paragraphs </h2>
<div id="output">
</div>
</body>
</html>
I hope this hel you
I would like to expand /collapse a text. I found several codes for that, but the issue they are using separates files for that .html
What I need is to have all of them set in the same doc, .html
Because I'm using a HTML editor, so I'm obliged to have all the code in the same page.
Please advise what to do or if there is a tutorial that would be very helpful.
Thank you in advance.
You can do this with pure HTML. Use <details>
<details>
<summary> click me </summary>
Text you want to expand or collide
</details>
Its that simple
Here you go study this and you will understand the basics:
W3Schools
Edit your code with this(there is allot more than just brackets):
Brackets
This is one page HTML with style tag and script tag:
Your css would go into the <style></style>
Your js would go into the <script></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" />
<title>Untitled Document</title>
<style>
.page-header {
color: #000;
}
#click {
border-radius: 2%;
height: 30px;
color: green;
}
</style>
</head>
<body class="test">
<header class="page-header">SIMPLE EXAmPLE</header>
<div class="row">
<div class="element">
<div class="start" id="testdiv"></div>
<button id="click">click to color background</button>
</div>
</div>
</body>
<script type="text/javascript">
var clickAlert = document.getElementById('click');
var rainbow = ["red", "blue", "green", "yellow"];
function change() {
document.body.style.background = rainbow[Math.floor(4*Math.random())];
}
clickAlert.addEventListener("click", change);
</script>
</html>
Well i'm new to html/js scripting but i'm working on a project and i want to using hyperlink to show/hide divs
for example if i click on first hyperlink it should show div id:1 only and if i click on second hyperlink it should show 2nd div only.
i managed to find an example of what i need on internet but i have no idea,why whatever i try it doesnot work for me
an example of what i need - my fiddle
and this is my code
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
so you ned to include JQuery that's what $() is.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
It is Working For me on JSFIDDLE. Add jquery library on your local project.
add This on your Head Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you forget to include $ jquery in you script tag
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
You should add jquery in your project.
You can use a CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
OR
you can include your own copy of library in project.
<script src="path/jquery.min.js"></script>
I have the following code:
<html>
<head>
<script>
</script>
<style>
</style>
</head>
<body>
<div id=div1 style="border:5px solid green" onClick="alert(this.id)">hi
<div id=div2 style="border:2px solid yellow">hello</div>
<div id=div3 style="border:2px solid red">world</div>
</div>
</body>
<button onClick="document.body.appendChild(document.getElementById('div1').cloneNode(true));">cloneNode</button>
</html>
I wanted to make the clone of the div1 to appear above the cloneNodebutton and hence kept the button outside the <body>. But each time I click on the cloneNodebutton the new element appears below the cloneNodebutton although I appended the new node to the <body>element(using appendChild()) and the button is outside the <body> element. So, are all the elements even those outside the <body>(as specified in the script) included or considered inside the <body> at runtime. Please help me understand this.
Check the demo
actual browser may rewrite invalid html (and, writing elements outside is not really natural) . You can add an other surrounding div#id and use it to append correctly.
Try this (I also added quotes for element' ids):
<html>
<head>
<script>
</script>
<style>
</style>
</head>
<body>
<div id="main">
<div id="div1" style="border:5px solid green" onClick="alert(this.id)">hi
<div id="div2" style="border:2px solid yellow">hello</div>
<div id="div3" style="border:2px solid red">world</div>
</div>
</div>
<button onClick="document.getElementById('main').appendChild(document.getElementById('div1').cloneNode(true));">cloneNode</button>
</body>
</html>
Remove your clone button and Add below code into above tag,
<div id="AppendSection"></div>
<button onClick="document.getElementById('AppendSection').appendChild(document.getElementById('div1').cloneNode(true));">cloneNode</button>
http://jsfiddle.net/t2K9U/2/
Another way to accomplish your goal is to move the button inside the <body> tag and put it at the end, but slightly modify the onClick action:
<html>
<head>
<script>
</script>
<style>
</style>
</head>
<body>
<div id=div1 style="border:5px solid green" onClick="alert(this.id)">hi
<div id=div2 style="border:2px solid yellow">hello</div>
<div id=div3 style="border:2px solid red">world</div>
</div>
<button onClick="this.parentNode.insertBefore(document.getElementById('div1').cloneNode(true), this);">cloneNode</button>
</body>
</html>