Suppose user Name is Rakesh Kumar Yadav, when he type name in 3 parts, I need to print value in singal textarea. I am using This code My english is bad.. But I think you were able to understand my issue.
function setaddress() {
var 1 = document.getElementById('1').value;
var 2 = document.getElementById('2').value;
var 3 = document.getElementById('3').value;
document.getElementById('4').innerHTML = "S/O : " 1 ", " 2 ", " 3;
}<div >
<label>First Name</label>
<input name="1" id="1" type="text" oninput="setaddress()">
</div>
<div >
<label>Middle Name</label>
<input name="2" id="2" type="text" oninput="setaddress()">
</div>
<div >
<label>Last Name</label>
<input name="3" id="3" type="text" oninput="setaddress()">
</div>
<label>Complete Name</label>
<textarea id="4" name="4" type="text" readonly></textarea>CodePudding user response：
- Avoid starting an
idwith an Integer - Avoid using Integers as variable name,
"S/O : " 1how does JS know the1is a variable, and not the number one? - The function is not called, I've added a button with a
onClick
function setaddress() {
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
var c = document.getElementById('c').value;
document.getElementById('x').innerHTML = "S/O : " a ", " b ", " c;
}<div >
<label>First Name</label>
<input name="1" id="a" type="text">
</div>
<div >
<label>Middle Name</label>
<input name="2" id="b" type="text">
</div>
<div >
<label>Last Name</label>
<input name="3" id="c" type="text">
</div>
<label>Complete Name</label>
<textarea id="x" name="4" type="text" readonly></textarea>
<br />
<button onclick='setaddress()'>Update</button>CodePudding user response：
While you've already accepted an answer, I'd like to offer a slightly different approach, with explanatory comments in the code:
// I've camelCased the form, so that it's easier to read
// the name and understand the intent of the function;
// this is entirely a personal preference though so feel
// absolutely free to rename it to your own conventions
// and preferences:
function setAddress() {
// here we use an Array-literal with the spread syntax
// to assign the results of document.querySelectorAll()
// to an Array, and for that Array to be assigned to the
// variable of 'name':
let name = [...document.querySelectorAll('.name')]
// here we take the Array of .name elements and use
// Array.prototype.map() to create a new Array based
// on the Array of .name elements:
.map(
// 'el' is a reference to the current .name element
// in the Array of elements, and we return the
// trimmed value of the Array, using String.prototype.trim()
// to remove leading/trailing white-space:
(el) => el.value.trim()
// here we filter the Array, with Array.prototype.filter():
).filter(
// 'val' is a reference to the current Array-element,
// which is the value of a .name element; if the
// assessment - val.trim().length - results in a truthy
// value (so the val after trimming has a length greater
// than 0) we retain the value, otherwise it's discarded:
(val) => val.trim().length
);
// here we find the element with the id of 'fullName', and we
// update its value property to be equal to the Array of values
// joined with a white-space character:
document.querySelector('#fullName').value = name.join(' ');
}
// here we retrieve all <input> elements with a class-name of
// of '.name' and iterate over that collection using
// NodeList.prototype.forEach():
document.querySelectorAll('input.name').forEach(
// using an Arrow function to bind the setAddress() function
// as the event-handler for the 'input' event (which handles
// paste, keyup, keydown; any event which takes place in the
// element that modifies the value):
(el) => el.addEventListener('input', setAddress)
);:root {
--commonSpacing: 1em;
--flexBasis: 3;
}
form {
display: grid;
inline-size: clamp(20em, 60vw, 1000px);
margin-block: var(--commonSpacing);
margin-inline: auto;
}
form > div {
display: flex;
justify-content: space-between;
gap: var(--commonSpacing);
}
label {
text-align: end;
flex-basis: calc((100%/var(--flexBasis)) - 0.75em);
}
label::after {
content: ':';
}
input {
flex-basis: calc(2*(100%/var(--flexBasis)) - 0.75em);
}
div label {
text-align: start;
}
textarea {
height: 5em;
resize: block;
}<!-- I've chosen to wrap the various elements in a <form> in order
that the various <input> elements and the <textarea> are
semantically grouped: -->
<form action="#">
<div >
<!-- I've added a 'for' attribute which has an attribute-value
equal to the 'id' of the related <input>, which allows a
user to click on the <label> and focus the <input>; this
is also useful for users with disabilities relying on the
use of accessibility features to browse, navigate and use
the internet:-->
<label for="firstName">First Name</label>
<!-- I've used meaningful, non-numeric id attributes in order
for you to easily access the <input> elements via JavaScript: -->
<input name="firstName" id="firstName" type="text">
</div>
<div >
<label for="middleName">Middle Name</label>
<input name="middleName" id="middleName" type="text">
</div>
<div >
<label for="fullName">Last Name</label>
<input name="familyName" id="familyName" type="text">
</div>
<label for="fullName">Complete Name</label>
<textarea id="fullName" name="fullName" type="text" readonly></textarea>
</form>It's important to remember that, as Mozilla notes in their reference documentation:
Note: Technically, the value for an
idattribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, '_', and '-' should be used and the value for anidattribute should start with a letter. For example, . has a special meaning in CSS (it acts as a class selector). Unless you are careful to escape it in the CSS, it won't be recognized as part of the value of anidattribute. It is easy to forget to do this, resulting in bugs in your code that could be hard to detect. Citation: see reference for "idattribute", below.)
References:
- CSS:
- HTML:
- JavaScript: