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
Related
This question already has answers here:
How do I make an HTML button not reload the page
(10 answers)
Closed 1 year ago.
I try to hide an Fieldset initially and then show it with an button click.
But its just show me the text for a second and then its gone again.
I tried to do it also with visibility attribute but I got the same problem.
Is there something I do wrong?
function myFunction() {
var f1 = document.getElementById("f1");
f1.style.display = "block";
}
#f1 {
display: none;
}
#btn_submit {
width: 23em;
height: 4em;
font-weight: bold;
background-color: #C6C5C5;
}
<body style="background-color:#A0A0A0;">
<form action="" method="post">
<br>
<div class="a">
<h1>onfiguration / Configuration</h1><br>
<p>
<font size="6">(9) Relais 1 / Relay 1</font><br>
</p>
<fieldset id="f1"><br>
<font size="4">9.1 Modus / Mode:</font><br><br>
</fieldset>
<button onclick="myFunction()" id="myBtn">Read more</button>
</body>
You forgot to close <form> tag.
Another thing, You've set button inside a form element which works as a submit button by default. You've to provide the type="button" to prevent form submission.
Also, Properly put <meta> tags in <head> and style and script tag before and after body respectively.
<!DOCTYPE html>
<html>
<head>
<title>Konfiguration / Configuration</title>
<meta charset="UTF-8">
<link rel="icon" href="data:;base64,=">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
#f1 {
display: none;
}
#btn_submit {
width: 23em;
height: 4em;
font-weight: bold;
background-color: #C6C5C5;
}
</style>
<body style="background-color:#A0A0A0;">
<form action="" method="post">
<br>
<div class="a">
<h1>onfiguration / Configuration</h1><br>
<p>
<font size="6">(9) Relais 1 / Relay 1</font><br>
</p>
<fieldset id="f1"><br>
<font size="4">9.1 Modus / Mode:</font><br><br>
</fieldset>
<button onclick="myFunction()" id="myBtn">Read more</button>
</div>
</form>
<script>
function myFunction() {
var f1 = document.getElementById("f1");
f1.style.display = "block";
}
</script>
</body>
</html>
I need to make a button that changes the text inside it when the cursor is over it, and changes it back when the cursor leaves the box.
I have tried on VScode with "document.getElementById().innerHTML" but it just changes the text when the cursor goes on and it doesnt go back to the original text.
button {
background-color: green;
border-color: white;
border-radius: 10px;
align-self: center;
}
body {
background-color: black;
}
h1 {
color:green;
text-align: center;
}
p {
color: chartreuse;
font-family: Verdana;
font-size: 12px;
}
button:hover{
background: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="website.css">
</head>
<body>
<h1>Web Page</h1>
<!-- Buttons -->
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click to display Date and Time</button>
<p id="demo"></p>
<button type="button"
onmouseover="this.innerHTML = Date()"
onmouseout="document.getElementById">What time is it</button>
<script>
var x = "What time is it";
document.getElementById("time").innerHTML = x;
</script>
You can use mouseenter and mouseleave event and then can change innerHTML of the button.
const btnEle = document.getElementById("btn");
btnEle.addEventListener('mouseenter', e => {
btnEle.innerHTML = "Save";
});
btnEle.addEventListener('mouseleave', e => {
btnEle.innerHTML = "Submit";
});
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div>
<button id="btn">Submit</button>
</div>
</body>
</html>
How I would do it is to have two <span>'s in my button. The first <span> will contain the text you want to show by default. The second <span> will contain the text you want to show on hover. This span is hidden by default.
Then, you could add an event listener to your button. On mouseover, hide the default text and show the span containing the hover text. In a mouseleave event listener, just do the opposite.
HTML:
<button id="myid">
<span class="default-text">Text 1</span>
<span class="hover-text" style="display: none;">Text 2</span>
</button>
JS:
var button = document.getElementById('myid')
button.addEventListener('mouseover', function() {
this.querySelector('.hover-text').style.display="block";
this.querySelector('.default-text').style.display="none";
});
button.addEventListener('mouseleave', function() {
this.querySelector('.default-text').style.display="block";
this.querySelector('.hover-text').style.display="none";
});
I am using jquery to create an element, i would then like the user to input the x and y values of the desired position of the element, and then click a button so the element would then appear at that position. This is a rough code of how the page is setup. want #newelement to appear in a new position after the forms are filled and the button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>
Create div element using jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#parent {
height: 300px;
width: 600px;
background: green;
margin: 0 auto;
}
#newElement {
height: 100px;
width: 100px;
margin: 0 auto;
background-color: red;
position: absolute;
}
</style>
</head>
<div id= "parent"></div>
<br><br>
<!-- Script to insert div element -->
<script>
function insert() {
$("#parent").append('<div id = "newElement">A '
+ newdiv </div>');
}
</script>
<button onclick="insert()">
insert
</button>
<form id="form1">
<b>First Name:</b> <input type="text" name="positionX">
<br><br>
<b>Last Name: </b><input type="text" name="positionY">
<input type="submit" value="Submit">
</body>
</html>
Using the "top" and "left" style attributes can be used if you want to position the top left corner of the new div relative to the top left corner of the parent
i.e. something like
<!DOCTYPE html>
<html>
<head>
<title>
Create div element using jQuery
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#parent {
height: 300px;
width: 600px;
background: green;
}
#newElement {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="parent"></div>
<!-- Script to insert div element -->
<script>
function insert() {
// Get the X and Y from the form elements
var x = parseInt($("[name='positionX'").val());
var y = parseInt($("[name='positionY'").val());
var newElement = $('<div id="newElement">newdiv</div>').css({top: y, left:x});
$("#parent").append(newElement);
}
</script>
<button onclick="insert()">
insert
</button>
<form id="form1">
<b>X:</b><input type="text" name="positionX" />
<br />
<b>Y:</b><input type="text" name="positionY" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
how i can create a javascript code to add class name to specific divs only
for Exapmle : i want to add a class_name to from div5 to the end of all divs ?
try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>Click the "Try it" button to add the "mystyle" class to the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
<script>
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
</script>
</body>
</html>
If you're looking to add a class name from one div to others, I would recommend using JQuery. This can be done like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function changeColor(){
$( document ).ready(function() {
$("div").addClass("work");
});
}
</script>
<style>
.work {
color: red
}
</style>
<div style="width: 100%" class="work"><h1>Hello</h1></div>
<div style="width: 100%" class=""><h1>Hello</h1></div>
<button onclick="changeColor()">Change second color by inserting class!</button>
function applyClass(elem_position, tagname, classname)
{
var div_elems = document.querySelectorAll(tagname);
for (var i = elem_position-1; i < div_elems.length;i++)
{
div_elems[i].className=classname;
}
}
Usage
Applies class some_class to div elements starting from position 3
applyClass(3,'div','some_class');
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?