I write function for manipulation with DOM objects. This function must find element with specific ID and add new child element to element with specific ID:
<html>
<head>
<title> Text </title>
<meta charset="utf-8">
</head>
<body id="tbody">
<script>
function add(){
el = document.getElementById("testform");
var nf=document.createElement("input");
nf.type="text";
el.appendChild(nf);
}
</script>
<p>
<form id="testform">
<button onclick="add();"> create</button>
</form>
</p>
</body>
</html>
Element of text input doesn't create on page,but same code is placed in script tag without function-work
You're reloading the page, and need to return false when clicking the button to stop the form from being submitted :
<html>
<head>
<title> Text </title>
<meta charset="utf-8">
</head>
<body id="tbody">
<script type="text/javascript">
function add(){
el = document.getElementById("testform");
var nf=document.createElement("input");
nf.type="text";
el.appendChild(nf);
}
</script>
<p>
<form id="testform">
<button onclick="add();return false;"> create</button>
</form>
</p>
</body>
</html>
Also, sticking a form inside a paragraph seems unnecessary ?
FIDDLE
Since the Default action of button element type is submit so it submits every time you click. You can do a return false or create a label tag instead of button something like:
<html>
<head>
<title> Text </title>
<meta charset="utf-8">
</head>
<body id="tbody">
<script>
function add(){
el = document.getElementById("testform");
var nf=document.createElement("input");
nf.type="text";
el.appendChild(nf);
}
</script>
<p>
<form id="testform">
<label onclick="add();"> create</label>
</form>
</p>
</body>
</html>
DEMO
Related
I am trying to create an alert function using the getElementById and it is not working. This is a very simple button i am trying to create but obviously its not simple for a noob like me. Thank you for all your help in advance. This is what i currently have:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick= "click()" style="color:green;" >click</button>
<script>
function click() {
document.getElementById("alerting").innerHTML = "I am an alert";
}
</script>
</body>
</html>
You need to add an element with id="alerting" where your text will appear. Otherwise document.getElementById("alerting") will return null and calling innerHTML on it will throw error.
<body>
<button onclick= "myFunction()" style="font-size:25px;" >click</button>
<p id="alerting">element with alerting id. value will change here</p>
<script>
function myFunction() {
document.getElementById("alerting").innerHTML = "Hello World";
}
</script>
</body>
You dont have any html elements with id="alerting" into which you can set the innerHTML.
If you want a popup alert instead of doing the innerHTML thing... just do:
alert("I am an alert");
Also of note... some browsers wont like functions named: "click".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick="someFunction()" style="color:green;" >Click Me</button>
<script>
function someFunction()
{
alert("I am an alert");
}
</script>
</body>
</html>
I'm trying to grab an input value with javascript and render it into a div element. What do I do to make it work?
I'm using querySeclector to grab the input value. When I hardcode it like this:
document.getElementById("result").innerHTML = "Hello World";
It works but doesn't when I replace "Hello World" with the variable that stores the input value and when I do a console.log, I get nothing back even though there are no errors.
HTML
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit">Submit</button>
</div>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
JAVASCRIPT
let submitButton = document.querySelector("#submit"),
showResult = document.getElementById("result").innerHTML,
weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
submitButton.addEventListener("click", weightBalancer);
function weightBalancer() {
showResult = weightsForLeftAndRightSides;
console.log(weightsForLeftAndRightSides);
}
you need get input value inside weightBalancer when sumbit button clicked
function weightBalancer() {
var weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
document.getElementById("result").innerHTML = weightsForLeftAndRightSides;
}
if i understood your question, you can write this code to put the user input in div tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA_Compatible" content="ie=edge">
<title> Test</title>
<script >
/*to put the user input in div tag*/
function myFunction(){
const userInput=document.querySelector("#firstinput");
const output=document.querySelector("#result");
output.innerHTML=userInput.value;//this parte overwrite the first input
}
</script>
</head>
<body>
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit" onclick="myFunction()">Submit</button>
</div>
<div id="result"></div>
</div>
</body>
</html>
Hope this helps
I am currently working in jsp. I need to get the value of input on text box while a buttton is clicked. My code is given below. While running it produces output which disappears in seconds. I need a stable output (text in textbox) when button is clicked.
<html>
<head>
<style type="text/css">
body {
background-color: #cccccc;
}
tab{ padding-left: 4em; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form>
<title>Businesscard Management</title>
</head>
<body>
<br><br><br><br><br><br>
<h2> Search : <input type="text" class="textbox" size="75" id="myText" autofocus="true" name="searchinput"/></h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myText").value="ertyu";
}
</script>
</body>
</html>
First of all you have some errors in your code markup. You have just one opened <form> tag inside of <head> tag. Also I noticed that you're trying to set styles for tab but this is not appropriate tag. And you forgot to close </html> tag. Be careful when writing code, better to use code indention for better reading and it could prevent plenty of errors.
regarding your code:
<html>
<head>
<style type="text/css">
body {
background-color: #cccccc;
}
tab {
padding-left: 4em;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Businesscard Management</title>
</head>
<body>
<br><br><br><br><br><br>
<form action="/">
<h2> Search : <input type="text" class="textbox" size="75" id="myText" autofocus="true" name="searchinput"/></h2>
<input type="button" onclick="myFunction()" value="Try it"/>
<p id="demo"></p>
</form>
<script>
function myFunction() {
document.getElementById("myText").value = "ertyu";
}
</script>
</body>
</html>
I've move <form> tag to it desired position. And replaced <button> with <input type="button"> to prevent form submitting. So regarding your code when you press Try it button you will assign "ertyu" text to the input value. And if you want to get value of it, just use document.getElementById("myText").value
Here is the code from the book "HTML 5 + JS for Dummies", looking at it for more than 2 hours and can't find a reason why it doesn't want to work. I'm in very early stage and sorry for my newb question.
<!DOCTYPE html>
<html>
<head>
<title> Outputting data to HTML </title>
<script language ="JavaScript">
{
document.getElementById("myText").
innerHTML ="Clicked!";
}
</script>
</head>
<body>
<h1> Creating HTML Element Output </h1>
<div> <p id="myText">Change Me </p> </div>
<div>
<input id="btnClickMe"
type="button"
value = "Click me"
onlick="WriteText()"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Outputting data to HTML </title>
<script>
function WriteText()
{
document.getElementById("myText").
innerHTML ="Clicked!";
}
</script>
</head>
<body>
<h1> Creating HTML Element Output </h1>
<div> <p id="myText">Change Me </p> </div>
<div>
<input id="btnClickMe"
type="button"
value = "Click me"
onclick="WriteText()"/>
</div>
</body>
</html>
Here's what i did/what was wrong:
You have used wrong syntax for functions or you forgot to use the function keyword
You misspelled onclick (onlick)
I moved the script part out of the head
Use setAttribute method because input filed have not innerHTML property.
`<script language ="JavaScript">
function WriteText()
{
document.getElementById("myText").setAttribute("value", "Clicked!");
}
</script>
</head>
`
It always seems to be a problem and I fail to see why, I'm trying to change element p text by using his ID, element p id="para1" is inside PostEditor.html:
The elementID I want to change is para1 in the following html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
The following function is issued by a click on a link inside index.html and displaying the page you are seeing above and is then supposed to change its content:
From index.html I issue the function from link:
<a onclick="postEditing()"> Edit</a>
This line issue the following function:
function postEditing()
{
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.document.getElementById("para1").innerHTML = "11111111111";
result.document.getElementById("para1").innerText = "11111111111";
result.document.getElementById("para1").value = "11111111111";
}
As you can see I tried three methods. I'd never understand what is the difference between them, but I tried all three and none worked!
It's because you're searching the document of the window which shows the index.html, not the document of the newly opened window. try following:
...
var editorWindow = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
editorWindow.document.getElementById("para1").innerHTML = "11111111111";
...
EDIT:
NOW i see the problem: in the function you're trying to access a property of the parameter element, but you don't pass a value for it. So this will end in an error because the accessed object is undefinded!
So you have three options to get it working:
test the parameter (always a good idea): var ID = null; if(element) ID = element.id;
pass a value: <a onclick="postEditing(this)"> Edit</a>
remove the line var ID = element.id;
SOLUTION: (TESTED)
I could not really say why, but the index.html found the para1 and can successfully set the new text. But somehow the new window will reinitialize the old value again.
So you have to do the changing in an handler you run at onLoad:
index.html:
<html>
<head>
<script>
function postEditing() {
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.onload = function() {
result.document.getElementById("para1").innerHTML = "11111111111";
}
}
</script>
</head>
<body>
<a onclick="postEditing()"> Edit</a>
</body>
</html>
PostEditor.html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
I'm fairly sure you will need to query the return result of calling window.open like this:
function postEditing(element)
{
var ID = element.id;
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.getElementById("para1").innerHTML = "11111111111";
result.getElementById("para1").innerText = "11111111111";
result.getElementById("para1").value = "11111111111";
}
[Untested though]
Your button type is submit, which is posting the form. The object is changing in the DOM, only after the script runs, the DOM is reloaded back to it's original state. Try changing your button type to "button", and you should see the P element change appropriately.
Edit: Here's the HTML I used to determine the above. Keeping the button as "submit" caused me to see the text change and then swap back. The HTML below should keep the text in place. HTH!
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<script>
function postEditing(element)
{
document.getElementById('para1').innerHTML = "asdafs";
}
</script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="button" onclick="postEditing('caller')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>