I would like to display the result from the name field in a read-only text field called output. I have it working via .innerHTML, but I'm not sure how to get the result into a text box.
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
}
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1 style="color:green;">
</h1>
<h2>Text value property</h2>
<p>
Change the text of the text field, and then click the button below.
</p>
Name:<input type="text" id="myText" value="Mickey">
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
Output:<input type="text" id="myText" readonly>
</body>
</html>
I would like to get the result inside a read-only text field.
Try the readonly property on the input element that's going to hold the output :
<body>
<h2>Text value property</h2>
<p>Change the text of the text field, and then click the button below.</p>
Name:<input type="text" id="myText" value="Mickey" />
<button type="button" onclick="myFunction()">Try it</button>
<input type="text" readonly id="output" style="display: none;">
<script>
function myFunction() {
var x = document.getElementById('myText').value;
var output = document.getElementById('output');
output.style.display = 'block';
output.value = x;
}
</script>
</body>
I was able to get it to work using this code.
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
}
</script>
<h2>Text value property</h2>
<p>
Change the text of the text field,
and then click the button below.
</p>
Name:<input type="text" id="myText" value="Mickey">
<button onClick="myFunction()">Try it</button><br>
<span id="demo"></span>
All you need to do is set the .value property of the output text input. The .value property can be written to via JavaScript even if it is read only to the user. Also, make sure that your input and output fields don't share the same ID:
const myText = document.getElementById("myText");
const output = document.getElementById("output");
document.getElementById('tryit').addEventListener('click', () => {
output.value = myText.value;
});
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2>Text value property</h2>
<p>
Change the text of the text field, and then click the button below.
</p>
Name:<input type="text" id="myText" value="Mickey">
<button type="button" id="tryit">Try it</button>
<p id="demo"></p>
Output:<input type="text" id="output" readonly>
</body>
</html>
It's also a good practice to use .addEventListener() instead of onclick handlers. It is the newer way of doing event handlers.
Related
I have started javascript DOM manipulation, I come across an error maybe.
Whenever I input in name field like jaykumar and press click me button .In demo, jaykumar comes and with in few microseconds go.
function myfunction() {
var x = document.getElementById("myform").elements["fname"].value;
document.getElementById("demo").innerHTML = x;
}
<form id="myform">
name<input type="textbox" name="fname"> email
<input type="textbox" name="email">
<button onclick="myfunction()"> Click me</button>
</form>
<div id="demo"></div>
A button inside a form's default behaviour is to submit the form. To change this make the button of type="button"
function myfunction() {
var x = document.getElementById("myform").elements["fname"].value;
document.getElementById("demo").innerHTML = x;
}
<form id="myform">
name<input type="textbox" name="fname"> email
<input type="textbox" name="email">
<button type="button" onclick="myfunction()"> Click me</button>
</form>
<div id="demo"></div>
I have code to ask the user to enter their name and display it in a <p> element
function my() {
var x = document.getElementById("tt").textContent;
document.getElementById("demo").innerHTML = x;
}
<h1> Whats your name ? </h1>
<form method="POST">
<input type="text" id="tt" placeholder="Enter Name : ">
<input type="checkbox" checked>
</form>
<button onclick="my">Submit now</button>
<p id="demo"></p>
</div>
i expect the output will be print name of user
2 items:
An input element doesn't have textContent, it has a value.
When delcaring an onclick handler, include the parenthesis () to indicate it's a function call.
function my() {
var x = document.getElementById("tt").value;
document.getElementById("demo").innerHTML = x;
}
<h1> Whats your name ? </h1>
<form method="POST">
<input type="text" id="tt" placeholder="Enter Name : ">
<input type="checkbox" checked>
</form>
<button onclick="my()">Submit now</button>
<p id="demo"></p>
</div>
You are having some syntax errors in code. Missing (), properties of input context.
function display(){
console.log('here')
document.getElementById("demo").innerHTML =document.getElementById("tt").value;
}
<h1> Whats your name ? </h1>
<form name = "myForm">
<input type="text" name = "name" id="tt" placeholder="Enter Name : ">
<input type="checkbox" checked>
</form>
<input type="submit" onclick="display()">
<p id="demo"></p>
</div>
</body>
To learn about syntax and javascript.
You should use the value property rather than the textContext property. input type fields use value and have no textContent.
Additionally, your onclick is incorrectly defined. I recommend using javascript:myFunction() format, when executing a function in this manner. See below:
function my() {
var x = document.getElementById("tt").value;
document.getElementById("demo").innerHTML = x;
}
<h1> Whats your name ? </h1>
<input type="text" id="tt" placeholder="Enter Name : ">
<input type="checkbox" checked>
<button onclick="javascript:my()">Submit now</button>
<p id="demo"></p>
You'll notice I also removed the form node. If you don't preventDefault on a form it will refresh the page upon submit.
It's fine for this kind of thing to just not use a form tag. But if you wanted to keep it, you'll want to select it and preventDefault behavior like this:
var myForm = document.querySelector('form');
myForm.addEventListener('submit', function(e) {
e.preventDefault();
});
You missed the round brackets:
<button onclick="my()">Submit now</button>
I have a one word <p>, and I'm looking to change the content of that paragraph to the value of a input box. It's really simple but I'm new to JavaScript and jQuery.
This is the paragraph to change
<p class="editor-example" id="screen-name">Name</p>
and this is the form and the button I'm using to get and apply the change
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time.
Thanks!!
Put the button inside the form and add an event listener to it. Then grab the value from the input and use innerHTML to replace the content inside p tag
document.getElementById('apply').addEventListener('click', function() {
document.getElementById('screen-name').innerHTML = document.getElementById('nameID').value.trim()
})
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
<button id="apply" type="button">Apply</button>
</form>
You need to write keypress event for the text box
$("#text").keypress(function() {
$("#p").html($("#text").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">p</p>
Please change the value of imput to change p: <input id="text"></input>
You can do like this:
$(document).ready(function(){
$("#nameID").keyup(function(){
var name = $("#nameID").val();
$("#screen-name").text(name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
As you said:
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!
In Jquery:
$(document).ready(function(){
$('#nameID').keyup(function(){
$('#screen-name').text($(this).val());
});
});
In html:
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
$("#apply").click(function() {
$("#paragraph").text($("#nameID").val());
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p id="paragraph">This Text changes from the form below</p>
<form>
<input id="nameID" type="text" >
<button id="apply" type="button">Apply</button>
</form>
I am trying to autofocus input on button click but it doesn't work. Code can be found here for edit: https://www.w3schools.com/code/tryit.asp?filename=FPPCFP5RTU9E
<input type="text" id="myText" autofocus>
<button onclick="myFunction()">Focus Input</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myText").autofocus = true;
}
</script>
autofocusis an HTML attribute. If you want to set the focus property by JavaScript you have to use focus().
So try document.getElementById("myText").focus();:
Working Code:
function myFunction() {
document.getElementById("myText").focus();
}
<input type="text" id="myText" autofocus>
<button onclick="myFunction()">Focus Input</button>
<p id="demo"></p>
I am creating a small webpage that will add two input fields together and place the result in another input field. This is what I have:
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
function add(){
var num1 = parseInt(document.calc.num1.value);
var num2 = parseInt(document.calc.num2.value);
var answer = (num1+num2);
document.getElementById('res').value = answer;
}
</script>
</HEAD>
<BODY>
<FORM NAME="calc">
<INPUT TYPE ="button" NAME="add" Value="+" onClick="add()">
<hr/>
<INPUT TYPE ="text" NAME="num1" Value="">
<INPUT TYPE ="text" NAME="num2" Value="">
<hr/>
<INPUT TYPE ="text" ID="res" NAME="result" VALUE="">
</FORM>
</BODY>
</HTML>
And I am getting the following error when I press the + button.
Uncaught TypeError: object is not a function
Try changing the function name from add to addNumbers or something like that.
onclick is the right attribute to handle click
onClick="add()"
Switch this bit to
onclick="add()"
The problem is the name of the function "add()", change the name and you will see that it will works!
HTML
<p>
<label for="field1">Field 1</label>
<input type="number" id="field1"/>
</p>
<p>
<label for="field2">Field 2</label>
<input type="number" id="field2"/>
</p>
<p>
<label for="total">Total</label>
<input readonly type="number" id="total"/>
</p>
<p>
<input type="button" id="calc" value="Calculate"/>
</p>
Javascript
Goes in a script tag in head.
function sumFields(fields) {
var total = 0;
// goes through each field and adds them to the total
for(var i=0,l=fields.length; i<l; i++)
{ total += parseInt(document.getElementById(fields[i]).value); }
document.getElementById('total').value = total;
}
function calc_click() {
// runs when the button is clicked
sumFields(['field1','field2']);
}
// main function
function init() {
// add button functionality
document.getElementById('calc').addEventListener('click',calc_click,false);
}
// fires when the DOM is loaded
document.addEventListener('DOMContentLoaded',init,false);