I am trying to create the following HTML code via javascript. For some reason, the bootstrap classes are not getting applied to the javascript code. Any help please?
<div class="form-group">
<label for="inputText" class="col-sm-2 control-label">Comments</label>
<div class="col-sm-10">
<textarea class="form-control" rows = "3" id="inputText" placeholder="Write your comments here"></textarea>
</div>
</div>
I m trying to create this HTML using javascript as below. Not sure what I am missing.
var div = document.createElement('div');
div.class = 'form-group';
var label = document.createElement('label');
label.class = 'col-sm-2 control-label';
label.innerHTML = 'Comments';
label.for = 'inputText';
var div1 = document.createElement('div');
div1.class = 'col-sm-10';
var commentText = document.createElement('textarea');
commentText.class = 'form-control';
commentText.id = 'inputText';
commentText.rows = '3';
commentText.placeholder = 'Write your comments';
div.appendChild(label);
div1.appendChild(commentText);
div.appendChild(div1);
For some reason, the bootstrap classes are not getting applied to the javascript code
That because there's no function class, you should use className, check working snippet bellow.
div.className = 'form-group';
var div = document.createElement('div');
div.className = 'form-group';
var label = document.createElement('label');
label.className = 'col-sm-2 control-label';
label.innerHTML = 'Comments';
label.for = 'inputText';
var div1 = document.createElement('div');
div1.className = 'col-sm-10';
var commentText = document.createElement('textarea');
commentText.className = 'form-control';
commentText.id = 'inputText';
commentText.rows = '3';
commentText.placeholder = 'Write your comments';
div.appendChild(label);
div1.appendChild(commentText);
div.appendChild(div1);
document.body.appendChild(div);
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
One can also use element.classList.add('custom-class') to append class name to class attribute.
This is simplly add bootstrap form-controll using javascript by clicking a button
HTML Bootstrap form input
<div id="dynamicInput">
<div class="form-group" >
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
1.
</span>
</div>
<input type="text" class="form-control" name="subjects" value="{{old('subjects') }}" id="learn" placeholder="They will learn..">
</div>
</div>
</div>
<button type="button" onclick="addInput('dynamicInput');" class=" btn btn-primary ml-5">Add more <i class="fa fa-plus"></i></button>
And Javascripts
var counter = 1;
function addInput(divName){
var group = document.createElement('div');
group.className = 'form-group';
var inputGroup = document.createElement('div');
inputGroup.className = 'input-group';
var inputGroupPre = document.createElement('div');
inputGroupPre.className = 'input-group-prepend';
var inputGroupText = document.createElement('span');
inputGroupText.className = 'input-group-text';
inputGroupText.innerHTML = counter + 1 +".";
var input = document.createElement('input');
input.className = 'form-control';
input.type = 'text';
input.name = 'subjects[]';
input.placeholder = 'what they will learn';
name='myInputs[]'>";
//Appending elements
document.getElementById(divName).appendChild(group);
group.appendChild(inputGroup);
inputGroup.appendChild(inputGroupPre);
inputGroup.appendChild(input);
inputGroupPre.appendChild(inputGroupText);
counter++;
}
Did you load in jQuery and Bootstrap scripts before this script. Also the Bootstrap css? Also, if you really want to create the HTML from scripts, I believe its better to use jQuery - since you already should have it loaded. just put everything in the $( document ).ready() function.
Related
I want to attach more than one field to a div along with a remove button. Something similar to Gmail file attaching methods if the user presses the remove button it should remove the specified p along with the button. But if I press the remove button it is not working properly I know the javascript array method is the problem but I am not able to understand where I am going wrong
<form name="create" action ="">
<input type="text" id="text">
<button name="submit" onclick="attach()" type="button">Submit</button>
</form>
<div id="attach">
</div>
<script>
function attach(){
var value =document.getElementById('text').value;
var content = document.createElement('p'); // is a node
content.className = 'element';
// Insert text
var btn = document.createElement("BUTTON");
btn.innerHTML = "Delete This element";
var i =0;
btn.onclick = function(){
console.log(i);
remove(i);
i++;
};
content.innerHTML = value;
document.getElementById("attach").appendChild(content);
document.getElementById("attach").appendChild(btn);
}
function remove(i){
var elem = document.getElementsByClassName('element');
elem[i].remove();
return false;
}
</script>
The working plunker is here.
http://plnkr.co/edit/eYhfN85FH4XabzE4rO4M?p=preview
What is going wrong here? How can I fix this?
A slightly different approach that simplifies your original example, is to take advantage of the function/closure you create for the button you create. In there, you can literally just reference the content and btn elements, and remove them directly
function attach(){
var value =document.getElementById('text').value;
var content = document.createElement('p'); // is a node
content.className = 'element';
// Insert text
var btn = document.createElement("BUTTON");
btn.className = 'element';
btn.innerHTML = "Delete This element";
btn.onclick = function(){
content.remove();
btn.remove();
};
content.innerHTML = value;
var attach = document.getElementById("attach");
attach.appendChild(content);
attach.appendChild(btn);
}
<form name="create" action ="">
<input type="text" id="text">
<button name="submit" onclick="attach()" type="button">Submit</button>
</form>
<div id="attach">
</div>
That way, you don't have to worry about what index you're removing or anything
Here you go!
function attach() {
const attachEl = document.getElementById("attach");
const value = document.getElementById("text").value;
const contentEl = document.createElement("p"); // is a node
contentEl.className = "element";
// Insert text
const btnEl = document.createElement("button");
btnEl.innerHTML = "Delete This element";
const wrapperEl = document.createElement("div");
btnEl.onclick = function() {
attachEl.removeChild(wrapperEl);
};
attachEl.appendChild(wrapperEl);
wrapperEl.appendChild(contentEl);
wrapperEl.appendChild(btnEl);
contentEl.innerHTML = value;
}
#attach{
background-color: teal;
}
.element {
background-color: wheat;
}
<form name="create" action="">
<input type="text" id="text">
<button name="submit" onclick="attach()" type="button">Submit</button>
</form>
<div id="attach">
</div>
We should use a wrapper to wrap a p & button together so that when we initiate delete it deletes the complete wrapper
function attach(){
var value =document.getElementById('text').value;
var content = document.createElement('p'); // is a node
var wrapper = document.createElement('div');
wrapper.className="wrapper";
content.className = 'element';
// Insert text
var btn = document.createElement("BUTTON");
btn.innerHTML = "Delete This element";
var i =0;
btn.onclick = function(){
console.log(i);
remove(i);
i++;
};
content.innerHTML = value;
wrapper.appendChild(content);
wrapper.appendChild(btn);
document.getElementById("attach").appendChild(wrapper);
}
function remove(i){
var elem = document.getElementsByClassName('wrapper');
elem[i].remove();
return false;
}
<form name="create" action ="">
<input type="text" id="text">
<button name="submit" onclick="attach()" type="button">Submit</button>
</form>
<div id="attach">
</div>
I am new to JavaScript and struck at the point where I am getting errors while inserting two elements, one is-page element and second is Button in the span tag, into one div elements.
document.getElementById('buttonForAddingItemToTheList').addEventListener('click', function() {
var getElementFromTheInput = document.getElementById('inputItemOfHtml').value;
//list item for page
var toCreateTheElementOfList = document.createElement('p');
//button tag
var toCreateTheButton = document.createElement('button');
toCreateTheButton.innerText = "Remove";
//span tag
var toCreateTheSpanForButton = document.createElement('span');
toCreateTheSpanForButton.setAttribute('class', 'classForTheButtonCreateByJavaScript');
//div tag
var toCreateTheElementOfDivContainer = document.createElement('div');
toCreateTheElementOfDivContainer.setAttribute('class', 'divContainerCreatedInJavaScript');
toCreateTheElementOfList.innerText = getElementFromTheInput;
toCreateTheSpanForButton.appendChild(toCreateTheButton);
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfLists);
toCreateTheElementOfDivContainer.appendChild(toCreateTheSpanForButton);
document.getElementById('containerToStoreListItem').appendChild(toCreateTheElementOfDivContainer);
});
<input type="text" placeholder="Enter List Item Here..." id="inputItemOfHtml"><br><br>
<button id="buttonForAddingItemToTheList">Add</button><br><br><br>
<div id="containerToStoreListItem">
</div>
There is typo error in your code
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfLists);
it should be
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);
document.getElementById('buttonForAddingItemToTheList').addEventListener('click', function() {
var getElementFromTheInput = document.getElementById('inputItemOfHtml').value;
//list item for page
var toCreateTheElementOfList = document.createElement('p');
//button tag
var toCreateTheButton = document.createElement('button');
toCreateTheButton.innerText = "Remove";
//span tag
var toCreateTheSpanForButton = document.createElement('span');
toCreateTheSpanForButton.setAttribute('class', 'classForTheButtonCreateByJavaScript');
//div tag
var toCreateTheElementOfDivContainer = document.createElement('div');
toCreateTheElementOfDivContainer.setAttribute('class', 'divContainerCreatedInJavaScript');
toCreateTheElementOfList.innerText = getElementFromTheInput;
toCreateTheSpanForButton.appendChild(toCreateTheButton);
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);
toCreateTheElementOfDivContainer.appendChild(toCreateTheSpanForButton);
document.getElementById('containerToStoreListItem').appendChild(toCreateTheElementOfDivContainer);
});
<input type="text" placeholder="Enter List Item Here..." id="inputItemOfHtml"><br><br>
<button id="buttonForAddingItemToTheList">Add</button><br><br><br>
<div id="containerToStoreListItem">
</div>
You have a typo mistake in third last line
toCreateTheElementOfLists should be toCreateTheElementOfList
toCreateTheElementOfDivContainer.appendChild(toCreateTheElementOfList);
https://jsfiddle.net/2wsuj0fr/
I'm trying to make a chat program in javascript that doesn't show the next question until someone types an answer for the first question.
This function works to display the first question ("paragraph one") and then display the second question ("paragraph two"), but it won't work a third time.
I keep getting an error:
"Uncaught TypeError: Cannot set property 'onchange' of null."
I have tried it with onkeyup and jquery's .keyup() function, but it gives me the same error. When I use the debugger to see the html that is generated, it shows the second paragraph, so I don't understand why the computer is saying it's null.
How can I solve this?
<div id = "div1">
</div>
<script>
function setElement(text, id, id2){
var para = document.createElement("p");
var node = document.createTextNode(text);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
para.id = id;
var inputBox = document.createElement("input");
element.appendChild(inputBox);
inputBox.id = id2;
}
setElement("This is paragraph one.", "p1", "i1");
document.getElementById("i1").onchange = function(){setElement("This is paragraph two.", "p2", "i2")};
document.getElementById("i2").onchange = function(){setElement("This is paragraph three.", "p3", "i3")};
//Uncaught TypeError: Cannot set property 'onchange' of null
</script>
document.getElementById("i2").onchange = function(){setElement("This is paragraph three.", "p3", "i3")};
That element doesn't exist when the javascript runs so it throws an error. You would need to run this line of code after creating the new element.
function setElement(pnum){
var para = document.createElement("p");
var node = document.createTextNode("this is paragraph " + pnum + ".");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
para.id = "p" + pnum;
var inputBox = document.createElement("input");
element.appendChild(inputBox);
inputBox.id = "i" + pnum;
pnum++;
inputBox.onchange = function(){setElement(pnum)};
}
setElement(1);
The above change will keep creating the paragraphs and input fields.
I'm not sure what you're actually trying to accomplish with this, but here is a simulation of a chat app that runs entirely in front-end javascript within a browser window.
function setElement(caller){
var outputs = document.getElementsByClassName("output");
Array.prototype.forEach.call(outputs, function(o) {
o.appendChild(makePara(caller, o));
o.scrollTop = o.scrollHeight;
});
caller.value = "";
}
function makePara(caller, o) {
var para = document.createElement("p");
var node = document.createTextNode(caller.value);
para.appendChild(node);
if (o.parentElement != caller.parentElement.parentElement) {
para.style.textAlign = "right";
para.style.backgroundColor = "#ffeeee";
} else {
para.style.textAlign = "left";
para.style.backgroundColor = "#eeffee";
}
return para;
}
var inputBox1 = document.getElementById("input1");
var inputBox2 = document.getElementById("input2");
inputBox1.onchange = function(){setElement(this)};
inputBox2.onchange = function(){setElement(this)};
.chat {
display: inline-block;
width: 200px;
padding: 20px;
border: 1px solid black;
}
.output {
width: 200px;
height: 200px;
overflow-y: scroll;
overflow-x: wrap;
}
<div id="div1" class="chat">
<h4>Chat window 1</h4>
<div id="txt1" class="output"></div>
<div id="inpt1">
<input type='text' id="input1" />
</div>
</div>
<div id="div2" class="chat">
<h4>Chat window 2</h4>
<div id="txt2" class="output"></div>
<div id="inpt2">
<input type='text' id="input2" />
</div>
</div>
Here is what I ended up with, thanks to Momus and https://www.w3schools.com/css/tryit.asp?filename=trycss_display_js. Thanks also to everybody who kept telling me the elements didn't exist yet. I decided to make them exist first, and then use javascript to show them.
<div id = "div1">
<p id = "p1" style = "display:none;">Hi, I'm RiddleBot. What is your name?</p>
<input id = "i1" type = "text" style = "display:none;">
<p id = "p2" style = "display: none;">Hi. What do you like to do?</p>
<input id = "i2" type = "text" style = "display:none;">
<p id = "p3" style = "display: none;">I like to tell riddles. Do you want to hear one?</p>
<input id = "i3" type = "text" style = "display:none;">
<p id = "p4" style = "display: none;">In marble walls as white as...</p>
<input id = "i4" type = "text" style = "display:none">
</div>
<script>
function showElement(pnum){
var inputBox = document.getElementById("i" + pnum);
document.getElementById("p" + pnum).style.display = "block";
document.getElementById("i" + pnum).style.display = "block";
pnum++;
inputBox.onchange = function () {showElement(pnum)};
}
showElement(1);
</script>
I have below html:
<div id="DetailsPanel" class="panel">
<div class="body stack-calc">
<div class="form stack-elem">
<div class="field">
</div>
//I want append my new Dynamically created DIV here
<div id="BusinessUnitsContainer" class="field">
</div>
</div>
</div>
</div>
Javascript:
var mainDiv = document.createElement('div');
mainDiv.className = 'field';
var innerDiv = document.createElement('div');
innerDiv.className = 'SelectAllCheckBox';
var newlabel = document.createElement("Label");
newlabel.innerHTML = "Select All";
var selectCheckbox = document.createElement('input');
selectCheckbox.type = "checkbox";
selectCheckbox.name = "selectCheckbox";
selectCheckbox.id = "selectCheckboxID";
selectCheckbox.checked = true;
innerDiv.appendChild(selectCheckbox);
innerDiv.appendChild(newlabel);
mainDiv.appendChild(innerDiv);
var BusinessUnitsContainerID = document.getElementById('BusinessUnitsContainer');
var DetailsPanelID = document.getElementById('DetailsPanel');
DetailsPanelID.insertBefore(mainDiv,BusinessUnitsContainerID);
I am getting "Error: NotFoundError: Node was not found"
Any idea
You are using a mix of jQuery and native node insertBefore.
Using jQuery
$("#BusinessUnitsContainer").before(mainDiv);
javascript
In your code the problem is BusinessUnitsContainer is not a direct child of DetailsPanel element.
var BusinessUnitsContainerID = document.getElementById('BusinessUnitsContainer');
BusinessUnitsContainerID.parentNode.insertBefore(mainDiv,BusinessUnitsContainerID);
Demo: Fiddle
How do I write this HTML using javascript.
<div id="resizeControl">
<input type="image" src="resuce.png" />
<input type="image" src="enlarge.png" />
</div>
and append it to a slidegallery object..
.net
var image1= document.createElement("input"); //create your input
image1.setAttribute('src','resuce.png'); //set the attributes
image1.setAttribute('type','image');
var image2= document.createElement("input");
image2.setAttribute('src','enlarge.png');
image2.setAttribute('type','image');
var resizeControl = document.createElement("div"); //create the parent div
resizeControl.id = "resizeControl"; //assign the id
resizeControl.appendChild(image1); //append your images to the new div
resizeControl.appendChild(image2);
document.body.appendChild(resizeControl); //append the div to your body (or other element)
Code example on jsfiddle
More information on concepts used:
Node.appendChild()
document.createElement()
element.setAttribute()
var div = document.createElement('div'),
input1 = document.createElement('input'),
input2 = document.createElement('input');
div.id = 'resizeControl';
input1.type = 'image';
input1.src = 'resuce.png';
input2.type = 'image';
input2.src = 'enlarge.png';
div.appendChild(input1);
div.appendChild(input2);
document.body.appendChild(div);
Javascript:
document.getElementById("Main").innerHTML += "<strong>Hello!</strong>";
document.getElementById("Main").innerHTML += "<div style='background:red'>Rrrrred!</div>";
HTML:
<div id="Main">
Why...
</div>