What I am trying to figure out is how to make a button, that when you click, will replace itself with a textbox. I found this code on the W3Schools website, and can't figure out how to put javascript (or HTML) elements in.
<p>Click the button to replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<p id="demo">Visit Microsoft!</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var res = str.replace("Microsoft", "W3Schools");
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>
<input type="text" name="textbox" value="textbox"><br>
In the end I want to be able to replace a button with the textbox I put outside the html tags
I would not suggest you the innerHTML replacement method.
Here are the steps where you can use replaceChild
Get the parent node of the selected element
use replaceChild
Here the code
// create the new element (input)
var textBox = document.createElement("input");
textBox.type = "text";
// get the button
var button = document.getElementById("demo");
// reference to the parent node
var parent = element.parentNode;
// replace it
parent.replaceChild(textBox, button);
On older browser you probably need a slighlty different solution.
var parent = button.parentNode;
var next = button.nextSibling;
// remove the old
parent.removeChild(button);
// if it was not last element, use insertBefore
if (next) {
parent.insertBefore(textBox, next);
} else {
parent.appendChild(textBox);
}
I ended up finding a code that works off of http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript
Related
I have a button when user clicks the button it create the text box along with remove button
but all the text boxes created with same id how we can delete the text box when clicks respective remove button
here My Code:
<body>
<button type="button" id="URLbtn" onclick="Createinput()"> + Add URL</button>
<div id="TextAreaBtn"></div>
<script>
function Createinput() {
var newdiv=document.createElement("div");
newdiv.id="test"
var Inputele=document.createElement("input");
Inputele.type="text";
Inputele.id="URLtxt"
newdiv.appendChild(btnele);
var btnele=document.createElement("button");
btnele.id="rmvbtn"
btnele.type="button"
btnele.innerHTML="-"
btnele.onclick=RemoveUrlBox()
newdiv.appendChild(btnele);
var element = document.getElementById("TextAreaBtn");
element.appendChild(newdiv);
}
function RemoveUrlBox() {}
</script>
</body>
i am getting following output
if user click 2 remove button only remove the second textbox and button
You need to select the wrapping div. Easiest way is to use remove() and use closest. No need to use the id..... You also need to remember ids need to be unique.
function createInput() {
var newDiv = document.createElement("div");
newDiv.className = 'group';
var inputElem = document.createElement("input");
inputElem.type = "text";
newDiv.appendChild(inputElem);
var btnElem = document.createElement("button");
btnElem.type = "button";
btnElem.textContent = "-";
btnElem.addEventListener("click", removeUrlBox);
newDiv.appendChild(btnElem);
var element = document.getElementById("TextAreaBtn");
element.appendChild(newDiv);
}
function removeUrlBox() {
this.closest('.group').remove();
}
<button type="button" id="URLbtn" onclick="createInput()"> + Add URL</button>
<div id="TextAreaBtn"></div>
This should do the trick:
const txtarea=document.getElementById('TextAreaBtn');
document.getElementById('URLbtn').onclick=()=>txtarea.innerHTML+=
'<div><input type="text" class="URLtxt"><button class="rmvbtn">-</button></div>';
txtarea.onclick=ev=>ev.target.className==="rmvbtn"&&ev.target.parentNode.remove()
<button type="button" id="URLbtn"> + Add URL</button>
<div id="TextAreaBtn"></div>
I replaced your id attributes with class attributes, as these don't need to be unique.
I reduced your script by using innerHTML instead of laboriously putting elements together with createElement(). This is a matter of opinion as both methods have their advantages.
I also used delegated event listener attachment for the removal buttons. This way you can get away with a single event listener on div.TextAreaBtn. The attached funcion will only trigger any action if the clicked element has class "rmvbtn".
Change
btnele.onclick=RemoveUrlBox()
to
btnele.addEventListener('click', function (e) {
// `this` is the button that was clicked no matter about the id
// `this.parentNode` is the div you want to remove
const nodeToRemove = this.parentNode;
nodeToRemove.parentNode.removeChild(nodeToRemove);
});
I have created a button in javascript. Now I can add button text on to it but with information icon.
I have created a button using javascript like this
<script>
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Click me");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
Now, I know ⓘ is html entity of information icon
<button style="font-size:24px">Click meⓘ</button>
This is the output from this code
The above code will produce the required thing i.e button name + icon.
but if i do this
var t = document.createTextNode("Click me"+"ⓘ");
it will not work.It will print text(ⓘ) only on button.I want to achieve same thing in javascript created button using javascript only.
I have also tried
x.classList.add("fa fa-info-circle fa-6")
font awesome class for info icon but it throws error.
Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('fa fa-info-circle fa-6') contains HTML space characters, which are not valid in tokens.
Is there any way to use html entities in javascript or any other simpler method to achieve the same.
Thanks,
You can either change the innerHTML of the button instead of creating a text node, since text nodes display text as-is:
<button onclick="myFunction()">ADD ANOTHER BUTTON</button>
<script>
function myFunction() {
var x = document.createElement("button");
x.innerHTML = "Click me ⓘ"
document.body.appendChild(x);
}
</script>
Or, you can use the unicode value of the character, in your case, it's \u24d8:
<button onclick="myFunction()">ADD ANOTHER BUTTON</button>
<script>
function myFunction() {
var x = document.createElement("button");
var t = document.createTextNode("Click me \u24d8");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
Here is what you should change to make it work for font awesome:
x.classList.add("fa", "fa-info-circle", "fa-6");
Docs link for classList methods: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Methods
Final Result
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Click me");
x.classList.add("fa", "fa-info-circle", "fa-6");
x.appendChild(t);
document.body.appendChild(x);
}
The createTextNode method creates a text node and shows contents as plain text. To display HTML, you need to use the innerHTML property. Also, you missed the semicolon.
function createButton(html) {
var btn = document.createElement('button');
btn.innerHTML = html;
document.body.appendChild(btn);
}
createButton('Click me ⓘ');
First time posting, sorry if i do something wrong.
When i try to make a new list with js, the list elements only display [object HTMLLIElement] in the DOM. I would want it to make a new bullet point which says "Hello" each time i press the button.
It only shows this https://gyazo.com/f441c11ce81d80ff14ba4e207c1a7e2d
Here's my code.
var bodyEl = document.querySelector("body");
var ulist = document.createElement("ul");
var bulletpointEl = document.createElement("li");
bulletpointEl.innerHTML = "hello"
bodyEl.appendChild(ulist);
function bulletpoint() {
ulist.innerHTML += bulletpointEl;
}
<button onclick="bulletpoint()">New bulletpoint</button>
You have to use appendChild instead of innerHTML. To create new li element in each button click, you have to create that inside the function.
I will also suggest you to use textContent instead of innerHTML when the content is simple text.
var bodyEl = document.querySelector("body");
var ulist = document.createElement("ul");
function bulletpoint(){
var bulletpointEl = document.createElement("li");
bulletpointEl.textContent = "hello"
ulist.appendChild(bulletpointEl);
bodyEl.appendChild(ulist);
}
<button onclick="bulletpoint()">New bulletpoint</button>
back
The problem is that you're trying to give innerHTML an object instead of a string.
innerHTML accepts a string - https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Syntax
If you want to append an html element to the ulist you'll need to use the .appendChild() method same as you did with the bodyEl -
function bulletpoint(){
ulist.appendChild(bulletpointEl);
}
Hope this helps!
i have a button when i click it i want to print hello plus the innerHTML of the button and remove itself :
<script type="text/javascript">
function MyFunc(element) {
var parentNd = element.parentElement
parentNd.innerHTML += "<p>Hello</p>" + element.innerHTML
parentNd.removeChild(element)
}
</script>
<button onclick="MyFunc(this);">My Button</button>
but it's just print the text and don't remove itself
why?
By rewriting the parent's innerHTML, you're replacing the button with a copy (since the HTML that defines the button is parsed again). So your reference to element points to a button that is no longer in the DOM, therefore removing it has no effect.
I suggest you stop using innerHTML, create the P element with createElement and then call replaceChild to swap it with the button.
this is okey!
<script type="text/javascript">
function MyFunc(element) {
var parentNd = element.parentElement
parentNd.removeChild(element)
parentNd.innerHTML += "<p>Hello</p>" + element.innerHTML
}
</script>
<button onclick="MyFunc(this);">My Button</button>
Use jquery
<button id="x" onclick="MyFunc(this);">My Button</button>
function MyFunc(element) {
var parentNd = element.parentElement
parentNd.innerHTML += "<p>Hello</p>" + element.innerHTML
$("#x").remove();
}
DEMO
OR use below code it will also works
function MyFunc(element) {
var parentNd = element.parentElement
document.write(element.innerHTML);
parentNd.removeChild(element);
}
Note: I didn't prefer this method , i think the best idea is hide the button in onclick event
How can i remove the style class applied to a textbox on the click event? I'm calling the textbox element using getElementsByName(). Here's my code:
<input id="userNameExists" name="popUpText" class="pop-upText" onclick="clearText(this);" />
function clearText(element)
{
id = element.getAttribute("id");
var textElement = document.getElementById(id);
textElement.value = "";
var element = document.getElementsByName("popUpText");
var count = 0;
for (count = 0; count < 2; count++) {
var id = element.item(count);
id.classname = "";
}
}
In the above script, im not getting the id in the variable id. Right now the values are like "#inputTextBoxName". Please help.
you can use removeClass();
you can manege your styling using attr();
exp:
$("#yourid").attr("style","float: right");
or remove class using
$("#yourid").removeClass("yourClass");
It is case sensitive so
id.className = '';
If you're trying to remove the class from the textbox when you click on the textbox itself, that code is far, far longer than it needs to be.
HTML:
<input type="text" id="userNameExists" name="popUpText" class="pop-upText" onclick="clearText(this);" />
Javascript:
<script>
function clearText(element) {
element.className = '';
element.value = '';
}
</script>
That said, inline event handlers (ie. declaring an onclick attribute on your HTML element) are a bad practice to get into.
Also, if you pass in a reference to an element, get its id, then call document.getElementById() with said id, you end up with two references to the same element. Yes, it should work, but totally pointless.