Develop Reference

Making an html element created using javascript "required"

var textbox = function(me) {
if (me.checked == false) {
var textb = document.createElement('textarea');
textb.name = "Address";
textb.id = "Address";
textb.required;
textb.placeholder = "Address";
me.parentNode.appendChild(textb);
}
setInterval(function() {
if (me.checked == false) {
me.parentNode.removeChild(textb);
return false;
}
});
};
This is the the java script code that I wrote to display a text area (named textb) when a radio button is selected. Though I put "textb.required" the text area is not made a compulsory field (that is if a person selects the radio button and does not fill the address an error is not returned)
Please help me to correct this

How do I make both a button-click and a Enter key cause the same event?

I'm a newbie with JavaScript, so please bear with me. I am doing a To-Do List app which requires the user to enter a text in the text box and the item would be added when a button is clicked or when you it the Enter Key. I was able to do it with the Button Click and when I added the functionality for the Enter key, the button stopped working. Could you tell me what I'm doing wrong? Below is the java script code I have. Thank You.
var itemTextBox, newButton;
function addNewItem(list, itemText)
{
var listItem;
listItem = document.createElement("li");
listItem.innerText = itemText;
list.appendChild(listItem);
}
itemTextBox = document.getElementById("inputText");
itemTextBox.focus();
newButton = document.getElementById("addButton");
newButton.onclick = userInput();
itemTextBox.onkeyup = function (event) {
if (event.which === 13)
{
userInput();
itemTextBox.value = '';
}
};
function userInput()
{
var itemText;
itemText = itemTextBox.value;
if (itemText || itemText !== "")
{
addNewItem(document.getElementById("listOfItems"), itemText);
}
}

Javascript show / hide elements

I have a hidden text area (which is defined as hidden with bootstrap)
I have a dropdown which has 2 options.
If I select 1st option, textarea should be shown.
If I select 2nd option, textarea should disappear.
Here are my codes and I don't know where I go wrong :
function OnSelectedIndexChange(){
var getDropDown = document.getElementById("myDropDownID");
var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].text;
if(getDropDownSelectedItemValue == 'Yes'){
document.getElementById("myTextAreaID").style.display = 'block';
}
else{
document.getElementById("myTextAreaID").style.display = 'none';
}
}
UPDATE:
Added jsfiddle link : jsfiddle.net/wy562fk8/1 but i am using blade templating, so you can't be able to see any output.

use onchange function.
document.getElementById("myDropDownID").onchange = function {
if(document.getElementById("myDropDownID").value == 'Yes'){
document.getElementById("myTextAreaID").style.display = 'block';
}
else{
document.getElementById("myTextAreaID").style.display = 'none';
}
}

Might be the reason you are doing
var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].text;
instead of
var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].value;

appendChild Possibly Deleting Element?

I am trying to create a simple to-do list application JavaScript. I have written up JavaScript to basically take the value from an input element and pass it into a few functions.
I created a live example on CodePen, which you may view here: http://cdpn.io/hnBmD
Edit: Code also located below?
It seems like appendChild could possibly be deleting the "li" node that the parent function is creating? May someone please give me a reasonable explanation to this?
Note: I do have the JavaScript in a separate file and it is being loaded right before the ending body tags.
HTML:
<form>
<p><input type="text" id="inItemText" autofocus><button type="submit" id="submitButton">+</button></p>
</form>
<ul id="toDoList">
</ul>
JavaScript:
// Defining nodes.
var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");
// Once "enter" is pressed or click event is triggered, execute the function.
// The function below is basically checking the value of the input, to make sure the value is empty. If it isn't, it passes the value and the "ul" element node into the addNewItem function.
submitButton.onclick = function(){
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
}
}
// Once the parameters are passed. This basically creates a "li" element, applies the value of the input element into the innerText of the "li" element created and then appends the "ul" with the "li" we just created. Also, it resets the value of the input so we can enter another checklist item in.
function addNewItem(list, itemText) {
var listItem = document.createElement("li");
listItem.innerText = itemText;
list.appendChild(listItem);
itemText = inItemText.value = "";
}
Thank you!

You need to return false from the onclick function after it calls addNewItem. Otherwise it will submit the form, which reloads the page.
submitButton.onclick = function(){
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
return false;
}
}
DEMO
Or more simply:
submitButton.onclick = function(){
var itemText = inItemText.value.trim();
if (itemText !== "" || itemText == " ") {
addNewItem(document.getElementById("toDoList"), itemText);
}
return false;
}
Or, as one of the comments suggested, get rid of the form, then there's nothing to submit.

Remove the form if not necessary or just prevent the default form submit action.
submitButton.onclick = function (e) {
e.preventDefault();
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
}
}

The button element in your HTML has a type attribute of submit. When its click event is triggered, the default action is performed which is to submit the form. You need to prevent this default behaviour.
var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");
submitButton.onclick = function(e){
e.preventDefault(); //prevent it from submitting
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
}
}
function addNewItem(list, itemText) {
var listItem = document.createElement("li");
listItem.innerText = itemText;
list.appendChild(listItem);
}

Get input value when clicking on button in JavaScript

I knew how to fix this but right now I just don't remember. What I am doing is dynamically create two input elements: a text-box and a button. When I press on the button I want an alert with the text-box's value
var Form = {
Create: function() {
var Input = document.createElement('input');
Input.type = 'text';
document.body.appendChild(Input);
var Button = document.createElement('input');
Button.type = 'button';
Button.value = 'Show Value';
document.body.appendChild(Button);
Button.onclick = function() {
alert(Input.value);
}
}
}
window.onload = function() { Form.Create(); }
When I click on the button I get an empty message, even if the text-box contains text. So, I want the function to get the content of the text-box in real-time but I just don't know how this was done.

it seems that you are appending an other button
change this line :
document.body.appendChild(LoginButton);
by this:
document.body.appendChild(Button);