I want to copy the value of an input type number
<input type="nubmer" id="input" value="2" min="2">
<div id="test">
</div>
and here my Javascript code
var myInput = document.getElementById("input").value;
var myDiv = document.getElementById("test");
var Clone=myInput.cloneNode(true);
myDiv.appendChild(Clone);
But it give that cloneNode() isn't a function
How can I fix this error
I want to copy the value of an input type number
The value is a string, so cloneNode wouldn't apply.
You can either set innerHTML to entirely replace the contents of the div:
var myInput = document.getElementById("input").value;
var myDiv = document.getElementById("test");
myDiv.innerHTML = myInput; // **Replaces**
...or use appendChild with createTextNode to append it to the div:
var myInput = document.getElementById("input").value;
var myDiv = document.getElementById("test");
myDiv.appendChild(document.createTextNode(myInput)); // **Appends**
var cloneNode(true) duplicates all the attributes and its value to another object.
You are trying to cloning the value of the above element. That's not possible. cloneNode() method only works for DOM elements
var myInput = document.getElementById("input").value;
Instead, clone the DOM element and append it to div.
var myInput = document.getElementById("input");
var myInput = document.getElementById("input");
var myDiv = document.getElementById("test");
var Clone = myInput.cloneNode(true);
myDiv.appendChild(Clone);
<input type="nubmer" id="input" value="2" min="2">
<div id="test">
Hope it helps!
Related
The <p> text doesn't change when I click the button.
An alert message shows that output and text variables are correct. But still the Inner Text of <p> doesn't change.
Here's the HTML:
<input type="text" id="msg"><br>
<button onclick="Message()">Submit</button><br>
<h2>Last Message:</h2>
<p class="msg">Message</p>
This is the JS:
function Message(){
var text = document.getElementById("msg").value;
var output = document.getElementsByClassName("msg")[0].innerHTML;
output = text;
}
You have to set the message directly onto the innerHTML property of the DOM node. Fixed example:
function Message() {
var text = document.getElementById("msg").value;
document.getElementsByClassName("msg")[0].innerHTML = text;
}
<input type="text" id="msg"><br>
<button onclick="Message()">Submit</button><br>
<h2>Last Message:</h2>
<p class="msg">Message</p>
Your defining a variable output to the value of document.getElementsByClassName("msg")[0].innerHTML then you are changing the value of output to be the value of text.
Primitives in javascript are passed by value, not by references.
Change var output = document.getElementsByClassName("msg")[0].innerHTML;
to document.getElementsByClassName("msg")[0].innerHTML = text
If you say something like:
var output = document.getElementsByClassName("msg")[0].innerHTML;
The value of output will just be some kind of string or similar.
Then when you change that you just change the value of the string but not the element.
What you want to do is this:
var output = document.getElementsByClassName("msg")[0];
output.innerHtml=text;
function Message(){
var text = document.getElementById("msg").value;
document.getElementsByClassName("msg").innerHTML = text;
}
You were super close.
Remove the innerHTML from var output = document.getElementsByClassName("msg")[0].innerHTML;
and add it here:
output.innerHTML = text;
So it'll look like this.
<input type="text" id="msg"><br>
<button onclick="Message()">Submit</button><br>
<h2>Last Message:</h2>
<p class="msg">Message</p>
<script>
function Message(){
var text = document.getElementById("msg").value;
var output = document.getElementsByClassName("msg")[0];
output.innerHTML = text;
}
</script>
I am trying to add an input field to a created element. This is my code.
var Images_to_beuploaded_cont = document.getElementById("Images_to_beuploaded_cont");
var carCont = document.createElement('div');
carCont.className += "multipleImageAdding";
Images_to_beuploaded_cont.insertBefore(carCont, Images_to_beuploaded_cont.firstChild);
So, the code above adds the following
<div id="multipleImageAdding"></div>
What I want to do is the code below.
<div id="multipleImageAdding">
<input type="text" name="fname">
</div>
Is this even possible? to add an element to another after it was created?
Is this even possible? to add an element to another after it was created?
Yes, you could add the input element before or after appending the parent container element.
After creating the input element and adding the desired type and name attributes, just use the appendChild() method:
var input = document.createElement('input');
input.type = 'text';
input.name = 'fname';
carCont.appendChild(input);
Snippet:
var Images_to_beuploaded_cont = document.getElementById("Images_to_beuploaded_cont");
var carCont = document.createElement('div');
carCont.className += "multipleImageAdding";
var input = document.createElement('input');
input.type = 'text';
input.name = 'fname';
carCont.appendChild(input);
Images_to_beuploaded_cont.insertBefore(carCont, Images_to_beuploaded_cont.firstChild);
<div id="Images_to_beuploaded_cont"></div>
This is my html
<td>
<input type="text" name="FullName"/>
<img/>
</td>
I'm trying to get the image element as the following way. However, it's not working-
var form = document.forms["myform"];
var fullNameTextBox = form["FullName"];
var thisImage = fullNameTextBox.nextSibling;
thisImage.style.display = 'block'; //shows uncaught type error,can not set property display of undefined.
Any help?
You've to use nextElementSibling
var form = document.forms["myform"];
var fullNameTextBox = form["FullName"];
var thisImage = fullNameTextBox.nextElementSibling;
thisImage.style.display = 'block';
.nextSibling will match textnodes (like the whitespace)
Either remove the whitespace from your html
<input type="text" name="FullName"/><img/>
or use .nextElementSibling
JAVASCRIPT
I am just trying to returen the value of the date selected but it's coming back undefined.
var getDate = function() {
var bdinput = $('#bd.bdinput').val();
var _this = bdinput;
console.log(_this);
};
$("button.bdsubmit").click(function() {
console.log(getDate());
})
HTML
<form id="bd">
<input name="BirthDate" class="bdinput" type="date" />
<button class="bdsubmit" type="submit">Submit Date</button>
You need .val() to get value of input not .value
var bdinput = $('#bd .bdinput').val();
// ^ also need space here
$('#bd .bdinput') will select element with class bdinput inside element with id bd.
$('#bd.bdinput') will select a element with id 'bd' and class bdinput (both id and class in one element)
If you want to do it with .value
var bdinput = $('#bd .bdinput')[0].value;
Or
var bdinput = $('#bd .bdinput').get(0).value;
It was a simple mistake.
var bdinput = $('#bd.bdinput').value;
should be:
var bdinput = $('#bd. bdinput').val();
I am doing my javascript assignment in which I have a form and there are multiple buttons in it. I want that javascript should render like
<form>
<input />
<button />
</form>
but it is rendering like this
<form> </form>
<input />
<button />
sample code
var formTag = document.createElement('form');
document.body.appendChild(formTag);
var txtInput = document.createElement("input");
var txtNode = document.createTextNode("0");
txtInput.setAttribute("id", "txtInput");
txtInput.appendChild(txtNode);
document.form.appendChild(txtInput);
You're mistakenly appending the input element to the document's form element (which, by the way, does not exist - you probably meant document.forms[0]).
Append the input to the formTag object instead, like so:
formTag.appendChild(txtInput);
Try appending the txtInput to your formTag object instead..
var formTag = document.createElement('form');
document.body.appendChild(formTag);
var txtInput = document.createElement("input");
var txtNode = document.createTextNode("0");
txtInput.setAttribute("id", "txtInput");
txtInput.appendChild(txtNode);
formTag.appendChild(txtInput);