We Keep Coding

Cloning the value of a number input into a div using javascript

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!

How do I add an input field after an element was created with javascript?

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>

I am getting undefined when trying to return the date value from an input field

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();

How to insert a line break with javascript?

The Submit Form I have has the name, email, and phone number fields. Of course, I want to insert line break between the three. I tried to insert a line break between all three, but only generated one at the end of the form, when my code should appended 3 line breaks, not one.
The generated view source shows this:
<label>Name: </label><input required="" name="fullName" type="text"><label>Email: </label> <input required="" name="email" type="text"><label>Phone Number: </label><input required="" name="phoneNumber" type="text"><br><input value="Submit Query" type="submit"></form>
My Javascript Code to produce this form:
function queryForm()
{
var queryBox = document.getElementById("queryBox").style.display = "block";
var queryForm = document.getElementById("queryForm");
var linebreak = document.createElement("br");
var lblName = document.createElement("label");
lblName.textContent = "Name: ";
queryForm.appendChild(lblName);
var fullName = document.createElement("input");
fullName.name = "fullName";
fullName.type = "text";
fullName.required = "required";
queryForm.appendChild(fullName);
queryForm.appendChild(linebreak);
var lblEmail = document.createElement("label");
lblEmail.textContent = "Email: ";
queryForm.appendChild(linebreak);
queryForm.appendChild(lblEmail);
var email = document.createElement("input");
email.name = "email";
email.type = "text";
email.required = "required";
queryForm.appendChild(email);
var lblPhoneNumber = document.createElement("label");
lblPhoneNumber.textContent = "Phone Number: ";
queryForm.appendChild(linebreak);
queryForm.appendChild(lblPhoneNumber);
var phoneNumber = document.createElement("input");
phoneNumber.name = "phoneNumber";
phoneNumber.type = "text";
phoneNumber.required = "required";
queryForm.appendChild(phoneNumber);
var submitQuery = document.createElement("input");
submitQuery.type = "submit";
submitQuery.value = "Submit Query";
queryForm.appendChild(linebreak);
queryForm.appendChild(submitQuery);
}

You should create new <br> tag each time when you will append it, something like
linebreak = document.createElement("br");
queryForm.appendChild(linebreak);
DEMO

You should try to append each time a new node, and not the same one that was previously created, i.e:
queryForm.appendChild(document.createElement("br"));
EDIT:
the explanation is here on the documentation
Node.appendChild
Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.
https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

The problem with your code is you're inserting the same element over and over again.
Here's an analogy: Imagine you have several children lined up in a row. Yes you can attempt to move one of them after each of the other children, however, at the end of the day you still only have one of that child. He's going to end up at the end of the row.
Solution: Create the line break element each time you need to insert it.
Also, here's an obligatory plug for jQuery: http://www.jquery.com

Protip: Append your inputs to your labels. That way a user can click the label to get focus on the input.
This has the additional perk that you can simply apply the CSS display:block to your labels and have them on separate lines!

You can use the classic \n to get this to work. I used this solution for a multi-line textarea in my project, but I cut out some code to simplify the example:
explanation.value = 'Equation: ' + equation;
explanation.value += '\nAnswer: ' + answer;

Create form and input field through javascript

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);