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/
Related
I'm trying to get my button for my To-do list to work for days now.. The button is not working but I can't figure out what the problem is. I don't want to use "onclick" in the html file I want to do the click event in the javascript file.
And then I have been trying to figure out how to get the To-do list to work with adding new tasks and being able to mark the task complete without removing it but it was harder than i thought.. I'd love to get some pointers! Appreciate it guys
var closebtn = document.getElementsByClassName("close");
function todolist(){
var li = document.createElement('li');
var btn = document.getElementById('my-button').onclick = function(){
var list = document.getElementById('list');
var input = document.getElementById('task').value;
var func = addEventListener('my-button');
var textnode = documentcreateTextNode(input);
li.appendChild(textnode);
if (input === ' '){
alert("write")
} else {
document.getElementById(list).appendChild(li);
}
document.getElementById('task').value = " ";
var thePanTag = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
thePanTag.className = "close";
thePanTag.appendChild(txt);
li.appendChild(thePanTag);
for (i = 0; i < closebtn.length; i++){
closebtn[i].onclick = function(){
var Div = this.parentElement;
Div.style.display = none;
}}}}
<body>
<h2>To-do list!</h2>
<div>
<input type="text" id="task" placeholder="Write task" />
<button id="my-button">Add task</button>
</div>
<ul id="list">
<li>kaa</li>
<li>baa</li>
<li>ss</li>
<li>aa</li>
<li>aaa</li>
</ul>
I removed the unnecessary code and be aware of using the correct onlick function.
Try this:
var closebtn = document.getElementsByClassName("close");
todolist();
function todolist(){
var li = document.createElement('li');
var btn = document.getElementById('my-button').onclick = function(){
var ul = document.getElementById("list");
var li = document.createElement("li");
var input = document.getElementById('task').value;
if(input!=''){
li.appendChild(document.createTextNode(input));
ul.appendChild(li);
}
}
}
<h2>To-do list!</h2>
<div>
<input type="text" id="task" placeholder="Write task" />
<button id="my-button">Add task</button>
</div>
<ul id="list">
<li>kaa</li>
<li>baa</li>
<li>ss</li>
<li>aa</li>
<li>aaa</li>
</ul>
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 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.
I'm making an app that submits posts, but I originally designed it with a textarea in mind, I've since put in an iframe to create a rich text field, set the display style to hidden for the textarea and wanted to know how I could modify it to use the iframe value.
HTML
<div id="textWrap">
<div class="border">
<h1>Start Writing</h1><br />
<input id="title" placeholder="Title (Optional)">
<div id="editBtns">
<button onClick="iBold()">B</button>
<button onClick="iUnderline()">U</button>
<button onClick="iItalic()">I</button>
<button onClick="iHorizontalRule()">HR</button>
<button onClick="iLink()">Link</button>
<button onClick="iUnLink()">Unlink</button>
<button onClick="iImage()">Image</button>
</div>
<textarea id="entry" name="entry" rows="4" cols="50" type="text" maxlength="500" placeholder="Add stuff..."></textarea>
<iframe name="richTextField" id="richTextField"></iframe><br />
<button id="add">Submit</button>
<button id="removeAll" onclick="checkRemoval()">Delete All Entries</button>
<ul id="list"></ul>
<ul id="titleHead"></ul>
</div><!--end of border div-->
</div><!--end of textWrap-->
Here is the JS to submit the posts.
//target all necessary HTML elements
var ul = document.getElementById('list'),
removeAll = document.getElementById('removeAll'),
add = document.getElementById('add');
//richText = document.getElementById('richTextField').value;
//make something happen when clicking on 'submit'
add.onclick = function(){
addLi(ul)
};
//function for adding items
function addLi(targetUl){
var inputText = document.getElementById('entry').value, //grab input text (the new entry)
header = document.getElementById('title').value, //grab title text
li = document.createElement('li'), //create new entry/li inside ul
content = document.createElement('div'),
title = document.createElement('div'),
//textNode = document.createTextNode(inputText + ''), //create new text node and give it the 'entry' text
removeButton = document.createElement('button'); //create button to remove entries
content.setAttribute('class','content')
title.setAttribute('class','title')
content.innerHTML = inputText;
title.innerHTML = header;
if (inputText.split(' ').join(' ').length === 0) {
//check for empty inputs
alert ('No input');
return false;
}
removeButton.className = 'removeMe'; //add class to button for CSS
removeButton.innerHTML = 'Delete'; //add text to the remove button
removeButton.setAttribute('onclick', 'removeMe(this);'); //creates onclick event that triggers when entry is clicked
li.appendChild(title); //add title textnode to created li
li.appendChild(content); //add content textnode to created li
li.appendChild(removeButton); //add Remove button to created li
targetUl.appendChild(li); //add constructed li to the ul
}
//function to remove entries
function removeMe(item){
var deleteConfirm = confirm('Are you sure you want to delete this entry?');
if (deleteConfirm){var parent = item.parentElement;
parent.parentElement.removeChild(parent)}
};
function checkRemoval(){
var entryConfirm = confirm('Are you sure you want to delete all entries?');
if (entryConfirm){
ul.innerHTML = '';
}
};
demo I'm working on for reference.. http://codepen.io/Zancrash/pen/VemMxz
you can use either local storage for passing iframe values to the parent DOM.
or ( use this to pass value from iframe to parent container )
var iFrameValue = $('#iframe').get(0).contentWindow.myLocalFunction();
var iFrameValue = $('#iframe').get(0).contentWindow.myLocalVariable;
From IFrame html
<script type="text/javascript">
var myLocalVariable = "text";
function myLocalFunction () {
return "text";
}
</script>
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>