document.body.appendChild() not working with <form> - javascript

I am running the code from w3schools to add button dynamically to the page. Here is the code.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to make a BUTTON element with text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);
}
</script>
</body>
</html>
But this dynamic addition doesn't work when I have a <form> tag. What changes in the JavaScript I can make to accommodate dynamic button without having to remove the <form> tag?

function myFunction() {
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
document.getElementById('theForm').appendChild(btn);
}
</script>
<p>Click the button to make a BUTTON element with text.</p>
<button onclick="myFunction()">Try it</button>
<form id="theForm">
</form>

Related

How to get anchor tag text to a variable and display as innerHTML?

I have given code below. I want that a variable of JS take anchor tag text as input and display in another Element through innerHTML.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p><a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a></p>
<p>Click the button to change the value of the href attribute of the link above to "www.cnn.com".</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var x=$(".myAnchor").on("click",function(event){
event.preventDefault();
$(this).text();
});
function myFunction() {
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
What you are doing wrong?
Instead of assigning the click event to a variable, assign the inner text of the clicked link in a variable and on clicking the button assign this variable to the required element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com1</a>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com2</a>
</p>
<p>
Click the button to change the value of the href attribute of the link
above to "www.cnn.com".
</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var x = '';
$(".myAnchor").on("click", function(event) {
event.preventDefault();
x = $(this).text();
});
function myFunction() {
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

assigning html entity code in javascript button not working

I am trying to create a button in javascript and assigning HTML entity code ⛨ to it. This is the HTML entity code of down arrow. Instead of showing the down arrow, the entire code is displayed in the button as is.
Below is how i am trying to achieve it
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
var btn = document.createElement("input");
btn.setAttribute('type','button');
btn.setAttribute('value','▼');
document.body.appendChild(btn);
</script>
</body>
</html>
Below is the output of my code
I expect that the button should display down arrow but for some reason it is not showing.
Try replacing ⛨ with \u26E8, try \u2193 for down arrow. JsFiddle, ref
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
var btn = document.createElement("input");
btn.setAttribute('type','button');
btn.setAttribute('value','\u26E8');
document.body.appendChild(btn);
btn = document.createElement("input");
btn.setAttribute('type','button');
btn.setAttribute('value','\u2193');
document.body.appendChild(btn);
</script>
</body>
</html>
Try like this,
<html>
<head></head>
<body>
<button>⛨</button>
<script type="text/javascript">
var btn = document.createElement("input");
btn.setAttribute('type','button');
btn.setAttribute('value','\u26E8');
document.body.appendChild(btn);
</script>
</body>
</html>
First button from DOM, Second one from Script.
You should use innerHTML instead of setAttribute:
var btn = document.createElement("input");
btn.setAttribute('type','button');
btn.innerHTML = '⛨';
document.body.appendChild(btn);
http://jsfiddle.net/dapx0nsy/

Adding an onclick event to a button with a button that has an onclick event?

I have 2 buttons, one has an onclick event that when clicked calls a function that is supposed to add an onclick event handler to the second button.
I was able to do this little example in w3schools.com, here is the code:
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
function addfunc(){
document.getElementById("myBtn").onclick = displayDate();
}
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
The intended function is that when clicking "Try it" button before "Trigger", nothing happens, and only after clicking "Trigger" the "Try it" button should work. Problem is when I click "Trigger" it actually runs the function that it is supposed to be executed by the click of "Try it" button.
Hope I explained myself, thanks!
You should use displayDate instead of displayDate(). Because displayDate() directly calls the function.
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
function addfunc(){
document.getElementById("myBtn").onclick = displayDate;
}
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
If you want to pass variables
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn2" onclick="addfunc();">Trigger</button>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
function addfunc(){
document.getElementById("myBtn").addEventListener('click', function(){
displayDate("my params");
});
}
function displayDate(params) {
document.getElementById("demo").innerHTML = Date() + " -- " + params;
}
</script>
</body>
</html>
You can disable the second button (in HTML code) and make a first button an activator of btn1
<body>
<main>
<input class="btn1" type="button" value="enable button 2" name="btn1" onclick="ableBtn2()">
<button Id="btn2" onclick="displayDate()" disabled="true">button 2</button>
<p id="test"></p>
<script type="text/javascript">
function ableBtn2() {
document.getElementById("btn2").disabled = false;
}
</script>
<script type="text/javascript">
function displayDate() {
document.getElementById("test").innerHTML = Date();
}
</script>
</main>
</body>

not able to change element on click in javascript

New to Javascript. Tried text type javascript also. Not worked. I doing this piece of code in notepad++ using html as extension and implementing on mozilla.
<html>
<head></head>
<body>
<h1>JavaScript in Body</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHtml = "Paragraph changed";
}
</script>
</body>
</html>
myFunction is trying to call innerHtml but it should be innerHTML (HTML is capitalised).
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed";
}
You need to capitalize the .innerHTML: https://jsfiddle.net/1e091yo2/
function myFunction(){
document.getElementById("demo").innerHTML = 'See, I told you.'
}
Check this working code.
function myFunction() {
document.getElementById("demo").innerHTML= "Paragraph changed";
}
<h1>JavaScript in Body</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>

How to place a TextNode into a div instead of body

how to place a TextNode into a div instead of body, thank you in advance!
Sorry if I am so unexperienced.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a h1 element with some text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var h = document.createElement("H1");
var t = document.createTextNode("Hello");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
</body>
</html>
One way of doing it would be to add a div to Body and then look for it using getElementById
<body>
<div id="myButtonContainer">
<p>Click the button to create a h1 element with some text.</p>
<button onclick="myFunction()">Try it</button>
</div>
<div id="myDiv"></div>
<script>
function myFunction() {
var myButtonContainer = document.getElementById("myButtonContainer");
myButtonContainer.style.display='none';
var h = document.createElement("H1");
var t = document.createTextNode("Hello");
h.appendChild(t);
var myDiv = document.getElementById("myDiv");
myDiv.appendChild(h);
}
</script>
</body>
You can check the example here: http://jsfiddle.net/jmgwya58/1/

Categories