Hello i have the following code : http://jsfiddle.net/yw7Zk/
var makeAreaEditable = function(event){
var btn = event.target,
li = btn.parentNode,
p = li.getElementsByClassName('paratext')[0];
p.style.display="none";
btn.innerText="Ok";
btn.onclick = saveEdit;
var textareaEdit = document.createElement('textarea');
textareaEdit.className = 'testarea';
li.appendChild(textareaEdit);
textareaEdit.appendChild(p);
textareaEdit.style.display="block";
};
The problem is that i want the paragraf display: none when i press the button edit but i want it displaied in the textarea.. so please help
Try changing:
textareaEdit.appendChild(p);
into:
textareaEdit.value = p.innerHTML;
Related
Pardon the bad title, it's hard to explain. If you know how to phrase it better, please comment and I will update as soon as I can.
So, I was messing around with a random generator site (perchance.org) and writing my own HTML/Javascript to make my generator work. It has a behavior that is what I want, but that shouldn't be happening according to my knowledge of HTML.
Let me explain with a minimal example.
The example code here is to produce a simple page that has a button.
This button should generate <input>s with <button>s next to them, attached with similar ID's.
The button, when clicked, deletes the <input> and <button>.
Here is a snippet to show you the code/let you reproduce the results:
<html>
<head>
<script>
var current_id = 0;
function add_input () {
var list = document.getElementById("list");
var input = document.createElement("input");
var delete_button = document.createElement("button");
var br = document.createElement("br");
input.id = "input_" + current_id;
delete_button.id = "button_" + current_id;
br.id = "br_" + current_id;
input.value = input.id;
delete_button.textContent = "Delete";
delete_button.onclick = function () {
delete_input(this.id.slice(7)) //To get the numerical ID
}
list.appendChild(input);
list.appendChild(delete_button);
list.appendChild(br);
current_id++;
}
function delete_input (id) {
var input = document.getElementById("input_"+id);
var button = document.getElementById("button_"+id);
var br = document.getElementById("br_"+id);
input.remove();
button.remove();
br.remove();
current_id--;
}
</script>
</head>
<body>
<div id="list">
</div>
<button onclick="add_input()">Add</button>
</body>
</html>
When you add two inputs, then delete the first, and add one more, it leaves you with two inputs using the same ID. It also leaves you with two buttons with the same ID. And yet, both buttons delete their intended target.
Why?
You really should delegate - here I wrap in a div that can be removed in one go
You can rename each input to have incremented IDs but just letting the cnt run, gives you unique IDs
let cnt = 0;
function add_input() {
var list = document.getElementById("list");
var div = document.createElement("div");
var input = document.createElement("input");
var delete_button = document.createElement("button");
var br = document.createElement("br");
input.id = "input_" + (cnt++)// list.querySelectorAll("div").length
input.value = input.id;
delete_button.textContent = "Delete";
delete_button.classList.add("delete")
div.appendChild(input);
div.appendChild(delete_button);
div.appendChild(br);
list.appendChild(div);
}
window.addEventListener("load", function() {
document.getElementById("list").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("delete")) tgt.closest("div").remove();
})
})
<div id="list">
</div>
<button onclick="add_input()">Add</button>
I changed your code to be more effective.
I'm not using IDs as they aren't adding any benefit instead making it more complex.
Instead I target the element via the event handler and an argument.
I also wrap each set of inputs/buttons in a div so I can just remove that div and it will remove all of the children.
function add_input() {
var list = document.getElementById("list");
var input = document.createElement("input");
var delete_button = document.createElement("button");
var br = document.createElement("br");
delete_button.textContent = "Delete";
delete_button.onclick = function(e) {
e.target.parentNode.remove();
}
var div = document.createElement("div");
div.appendChild(input);
div.appendChild(delete_button);
div.appendChild(br);
list.appendChild(div)
}
<div id="list">
</div>
<button onclick="add_input()">Add</button>
I'm new to all of this so please bear with me...
I have a Bootstrap 3 modal window that opens up with a few form fields in it. I've managed to append the form fields to the DOM after you click Submit New Appointment. Buuut I can't seem to figure out how to close the modal window after the fields have been appended to the DOM. I'm hoping to achieve this by writing some good ole vanilla JavaScript. (Unfortunately I cannot use any jQuery.)
I have included the vanilla JavaScript code below. (It basically creates an appointment card from the info inputed from the form thats in the modal and then it gets displayed as a card into the DOM.)
Thanks for taking a look!
var form = document.getElementById('addForm');
// element to append the new carousel item to
var itemList = document.querySelector('.carousel-inner');
// form submit event
form.addEventListener('submit', addItem);
// form delete event
itemList.addEventListener('click', removeItem);
// add item Function
function addItem(e) {
e.preventDefault();
// get input value in the modal
var newItem = document.getElementById('item').value;
var newItemTwo = document.getElementById('time').value;
var newItemThree = document.getElementById('name-of-client').value;
var newItemFour = document.getElementById('phone-number-client').value;
var newItemFive = document.getElementById('acces-notes').value;
// create a new li element with the text grab from above
var li = document.createElement('li');
/**
* Set the correct class name for the carousel to work
*/
// li.className = 'list-group-item';
li.className = 'item';
li.style.maxWidth = '95%';
li.style.border = 'solid 1px #d3d3d3';
li.style.padding = '10px';
li.style.height = '150px';
li.style.marginRight = '12%';
li.style.marginLeft = '12%';
li.style.fontWeight = '500';
li.style.fontSize = '14px';
// console.log(li)
// create a new p element with the text grab from above
var pOne = document.createElement('p');
pOne.className = 'items';
pOne.style.fontSize = '12px';
pOne.style.fontWeight = '400';
pOne.style.marginTop = '5px';
var pTwo = document.createElement('p');
pTwo.className = 'items';
pTwo.style.fontSize = '12px';
pTwo.style.fontWeight = '200';
console.log(pTwo)
var pThree = document.createElement('p');
pThree.className = 'items';
pThree.style.fontSize = '12px';
pThree.style.fontWeight = '200';
console.log(pThree)
var pFour = document.createElement('p');
pFour.className = 'items';
pFour.style.fontSize = '12px';
pFour.style.fontWeight = '200';
console.log(pFour)
// add text node with input value
li.appendChild(document.createTextNode(newItem));
pOne.appendChild(document.createTextNode(newItemTwo));
pTwo.appendChild(document.createTextNode(newItemThree));
pThree.appendChild(document.createTextNode(newItemFour));
pFour.appendChild(document.createTextNode(newItemFive));
// create delete BUTTON
var deleteBtn = document.createElement('button');
deleteBtn.style.width = '50px';
deleteBtn.style.float = 'right';
deleteBtn.style.height = '50px';
deleteBtn.style.borderRadius = '50%'
deleteBtn.style.border = 'solid 1px red';
deleteBtn.style.backgroundColor = 'white';
deleteBtn.style.color = 'red';
// add the classes to the delete BUTTON
deleteBtn.className = "btn btn-danger btn-sm float-right delete";
// append the text node
deleteBtn.appendChild(document.createTextNode('X'));
// append delete button into the LI
li.appendChild(deleteBtn);
// append li to list.
/**
* insert the new element at the beginning of the itemList element, not at the end
*/
// itemList.appendChild(li);
itemList.insertBefore(li, itemList.firstChild);
// append p elements into LI; (not sure if this is the best way but its working)
li.appendChild(pOne);
li.appendChild(pTwo);
li.appendChild(pThree);
li.appendChild(pFour);
li.appendChild(pFive);
}
// remove item function
function removeItem(e) {
console.log(e.target)
if (e.target.classList.contains('delete')) {
if (confirm('Are you sure bro?')) {
var li = document.querySelector('.item.active');
itemList.removeChild(li);
document.querySelector('.item').classList.add('active')
}
}
}
Image of the modal from Bootstrap 3
I want to replace an element by another.
The element however is placed in an div with other elements.
When I run my code the whole div is replaced.
How do I prevent this behavior?
function edit(e) {
selectedElement = e.id
var newElement = document.createElement("input");
var newElementA = document.createTextNode("bla");
newElement.appendChild(newElementA);
var oldElement = document.getElementById(selectedElement);
var parentDiv = oldElement.parentNode
parentDiv.replaceChild(newElement, oldElement);
}
You shouldn't be appending a text node to an input box. You should set the value.
Here is a working codepen, based on your comments.
<div id="parentDiv">
<div>
hi
</div>
<a id="pleaseReplace" onclick="edit(event)">hi2</a>
<div>
hi3
</div>
</div>
function edit(e) {
selectedElement = document.getElementById(e.srcElement.id);
var newElement = document.createElement("input");
newElement.value = selectedElement.innerHTML;
var parentDiv = selectedElement.parentNode
selectedElement = parentDiv.replaceChild(newElement, selectedElement);
}
Here is my code: http://jsfiddle.net/H5bRH/
Every time I click on the submit button, it should insert what I typed into a new li item.
But instead of that, it inserts what I typed the first time PLUS the new value that I typed. Play with my jsfiddle to see what I mean.
How do I fix this so that it only adds what the user inputs into the form?
I assume there's something wrong here:
function saveTweet() {
var tweet = document.getElementById("tweet");
var tweetName = tweet.value;
var li = document.createElement("li");
li.innerHTML = tweetName;
var ul = document.getElementById("tweets");
ul.appendChild(li);
}
You have attached 2 click event to save button.
button.onclick = saveTweet;
Using jQuery $("#saveTweet").click(function ()
$("#saveTweet").click(function () {
var tweet = document.getElementById("tweet");
var tweetName = tweet.value;
var li = document.createElement("li");
li.innerHTML = tweetName;
var ul = document.getElementById("tweets");
ul.appendChild(li);
$("li").slideDown("fast");
});
JSFiddle
Why not just reduce all that code to :
$("#saveTweet").click(function () {
$('#tweets').append('<li>' + $("#tweet").val() + '</li>')
$("li").slideDown("fast");
});
jsFiddle example
Instead of having two click handlers for the #saveTweet button, move the slideDown call to your saveTweet function.
function saveTweet() {
var tweet = document.getElementById("tweet");
var tweetName = tweet.value;
var li = document.createElement("li");
li.innerHTML = tweetName;
var ul = document.getElementById("tweets");
ul.appendChild(li);
$("li").slideDown("fast");
}
It happens because you bind two click handlers on the #saveTweet element.
One to add the content, and one to animate the li elements..
In your case the animated one is occuring first and the appending second.. so you always animate the previously added element...
Since you use jQuery anyway, why not use that for all your interactions ?
$(function () {
var button = $("#saveTweet");
button.on('click', function () {
var tweet = $("#tweet"),
ul = $("#tweets"),
tweetName = tweet.val(),
li = $('<li>', {html: tweetName});
ul.append(li);
li.slideDown("fast");
});
});
Demo at http://jsfiddle.net/gaby/Y9cY3/1/
I'm building a submission form for a static blog. The form is located here:
https://archwomen.org/blog/submit
I have a markdown preview, but I would also like to have an html preview.
Here is the idea:
When someone clicks on the "html" button, I need this html markup:
<div id="preview"></div>
To get changed to this:
<textarea readonly id="preview"></textarea>
And when someone clicks on the "live" button, I want the html markup to get changed back. I was hoping to do this with pure javascript but so far I haven't had much luck. I setup a jsfiddle here:
http://jsfiddle.net/Lc2Yg/
function transformTag(tagId){
var elem = document.getElementById(tagId);
var children = elem.childNodes;
var parent = elem.parentNode;
var newNode = document.createElement("textarea readonly id="preview"");
for(var i=0;i<children.length;i++){
newNode.appendChild(children[i]);
}
parent.replaceChild(newNode,elem);
}
Any help will be greatly appreciated.
Try
window.transformTag = function(type, tagId){
var elem = document.getElementById(tagId), newNode;
var children = elem.childNodes;
var parent = elem.parentNode;
if(type == 'input'){
newNode = document.createElement("textarea");
newNode.readOnly = true;
newNode.value = elem.innerHTML;
} else {
newNode = document.createElement("div");
newNode.readOnly = true;
newNode.innerHTML = elem.value;
}
newNode.id = tagId;
parent.replaceChild(newNode, elem);
}
Demo: Fiddle
jQuery: how to change tag name?
http://www.webmaster-talk.com/javascript-forum/71713-changing-a-tag-one-element-another.html
Better create two elements and switch their visibility.
I've changed the code a little bit: http://jsfiddle.net/Lc2Yg/2/
function transformTag() {
var elem = document.getElementById('preview');
var edited_area = document.getElementById('text-input');
var parent = elem.parentNode;
var newNode = document.createElement("textarea");
newNode.rows = 25
newNode.cols = 25
newNode.readOnly = true
newNode.value = edited_area.value
parent.replaceChild(newNode,elem);
}