var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;
function addformtopage() {
var form = document.createElement('div');
form.setAttribute("id", "remform");
form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" style=\"visibility: hidden\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" style=\"visibility: hidden\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" style=\"visibility: hidden\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" style=\"visibility: hidden\">Enter a Product Quantity</div><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";
cancelform = document.getElementById('cancel');
submit = document.getElementById('submitproduct');
document.getElementById('panel').appendChild(form);
}
function removebuttons() {
rem.setAttribute("hidden", true);
}
function showbuttons() {
rem.removeAttribute("hidden", false);
}
btnform.addEventListener('click', function() {
addformtopage();
removebuttons();
});
cancelform.addEventListener('click', function() {
showbuttons();
});
submit.addEventListener('click', function() {
});
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<title>
JS Form
</title>
</head>
<body>
<div id="main">
<p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
</div>
<div id="panel">
</div>
<div id="listing">
</div>
<script src="script.js"></script>
</body>
</html>
I am new to javascript and trying this small project in which I am adding HTML elements to HTML file. At first, the page shows two buttons. Then after we click on "Add Product", the form just added is displayed and the buttons previously showed are hidden. I have to add validation in the form but I haven't reached that step now. Right now the buttons in the form are not working as expected. Well, they are not working at all. Can someone tell me the problem in the code? Help will be highly appreciated.
You will have to wait for the elements to be added to the DOM before you can query for them.
var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;
function addformtopage() {
var form = document.createElement('div');
form.setAttribute("id", "remform");
form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" style=\"visibility: hidden\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" style=\"visibility: hidden\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" style=\"visibility: hidden\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" style=\"visibility: hidden\">Enter a Product Quantity</div><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";
// This line needs to be before...
document.getElementById('panel').appendChild(form);
// ...these lines
cancelform = document.getElementById('cancel');
submit = document.getElementById('submitproduct');
}
function removebuttons() {
rem.setAttribute("hidden", true);
}
function showbuttons() {
rem.removeAttribute("hidden", false);
}
btnform.addEventListener('click', function() {
addformtopage();
removebuttons();
// Since cancelform & submit are created inside the addformtopage method
// These method calls needs to be inside the event handler.
// Otherwise both cancelform & submit would be undefined, and you can't call methods on an undefined value
cancelform.addEventListener('click', function() {
showbuttons();
});
submit.addEventListener('click', function() {
});
});
<div id="main">
<p>
<button id="clicktoadd">Add Product</button>
<button id="clicktoshow">Show List</button>
</p>
</div>
<div id="panel"></div>
<div id="listing"></div>
Here is a sample how use add event listeners to buttons:
document.querySelector('#clicktoadd').addEventListener('click',() => {
console.log('add button clicked')
})
document.querySelector('#clicktoshow').addEventListener('click',() => {
console.log('show button clicked')
})
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<title>
JS Form
</title>
</head>
<body>
<div id="main">
<p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
</div>
<div id="panel">
</div>
<div id="listing">
</div>
</body>
</html>
strong text
Some logic error here
cancelform = document.getElementById('cancel');
submit = document.getElementById('submitproduct');
document.getElementById('panel').appendChild(form);
cancelform and submit will return null because form is yet to added to the document.
Related
I'm learning JavaScript and this is a practice scenario for me.
What I have already is a button that clones content, and within that content that has been cloned, there is a button to remove it.
When I click the button that prompts you to remove the content, it removes the first set of content.
What I want to happen is when you click the button that prompts you to remove the content, it removes the content related to that button and nothing else.
This is the CodePen link.
https://codepen.io/JosephChunta/pen/YzwwgvQ
Here is the code.
function addContent() {
var itm = document.getElementById("newContent");
var cln = itm.cloneNode(true);
document.getElementById("placeToStoreContent").appendChild(cln);
}
function removeContent() {
var x = document.getElementById("content").parentNode.remove();
}
// This is for debug purposes to see which content is which
document.getElementById('orderContent')
.addEventListener('click', function(e) {
const orderedNumber = document.querySelectorAll('.thisIsContent');
let i = 1;
for (p of orderedNumber) {
p.innerText = '' + (i++);
}
});
.contentThatShouldBeHidden {
display: none;
}
<div id="placeToStoreContent">
</div>
<button id="orderContent" onclick="addContent()">Add Content</button>
<div class="contentThatShouldBeHidden">
<div id="newContent">
<div id="content">
<p class="thisIsContent">This is a prompt</p>
<button onclick="removeContent()">Remove this</button>
<hr />
</div>
</div>
</div>
When you'r trying to remove by ID, it takes the first ID it finds.
To remove the correct content, send this onclick.
<button onclick="removeContent(this)">Remove this</button>
And handle it in your function:
function removeContent(el) {
el.parentNode.remove();
}
Example:
function addContent() {
var itm = document.getElementById("newContent");
var cln = itm.cloneNode(true);
document.getElementById("placeToStoreContent").appendChild(cln);
}
function removeContent(el) {
el.parentNode.remove();
}
// This is for debug purposes to see which content is which
document.getElementById('orderContent')
.addEventListener('click', function(e) {
const orderedNumber = document.querySelectorAll('.thisIsContent');
let i = 1;
for (p of orderedNumber) {
p.innerText = '' + (i++);
}
});
.contentThatShouldBeHidden { display: none; }
<div id="placeToStoreContent">
</div>
<button id="orderContent" onclick="addContent()">Add Content</button>
<div class="contentThatShouldBeHidden">
<div id="newContent">
<div id="content">
<p class="thisIsContent">This is a prompt</p>
<button onclick="removeContent(this)">Remove this</button>
<hr />
</div>
</div>
</div>
In your remove button, do this:
<!-- The "this" keyword is a reference to the button element itself -->
<button onclick="removeContent(this)">Remove this</button>
And in your javascript:
function removeContent(element) {
element.parentNode.remove();
}
i am trying to use JavaScript where i can click on a button and it will generate a button above it so for example i have the first button called add additional:
<a href"#"><button type="button">Add Additional</button></a>
When this button is clicked and it will generate another button where i want it to be displayed the below:
<td>
Name
</td>
<td>
<button type="button">Choose another thing</button>
</td>
and is it possible to repeat this process like generating more of the 2nd button "Choose Another thing"
i hope this ins't too confusing
I think you are looking for something like this!! Just add a script so that whenever you click on the button it will execute it and create more buttons.
<!DOCTYPE html>
<html>
<body>
<p>Click the "Add Additional" button to create a BUTTON element with a "Choose Another Thing" text.</p>
<button onclick="myFunction()" type="button">Add Additional</button>
<script>
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Choose another thing");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
I think this is the elegant way.
function appendButton(textContent, selector) {
var button = document.createElement('button');
button.classList.add('any');
button.innerHTML = textContent;
var selectedElement = document.querySelector(selector);
return selectedElement.appendChild(button);
}
// Call this function from wherever u like
// appendButton('click here', '.container');
<div class="container">
<button onclick="appendButton('click here', '.container')">
Click me
</button>
</div>
Run this you will get your solution
<html>
<head>
<script type="text/javascript">
function myFunction()
{
var a=document.createElement("a");
a.setAttribute("href","secondpage.html");
var btn=document.createElement("BUTTON");
var text=document.createTextNode("Choose another thing");
btn.appendChild(text);
a.appendChild(btn);
document.body.appendChild(a);
}
</script>
</head>
<body>
<a href"#"><button type="button" onclick="myFunction()">Add
Additional</button></a>
</body>
</html>
Give an id/class for a division append to it.
<div id='my_id' >
<td>Name</td>
<td><button>click</button></td>
</div>
When you click on addMore button write a function to append it to my_id
function onclickforaddbutton(){
id = document.getElementById('my_id');
var data = prompt("Enter something"); //where you can get data from user
id.innerHTML+="<td>"+data+"</td><td><button>Something</button></td>";
}
You need to first decide (container) where to add a new row. Then on click of add button, you can create a row with two columns, for the name and the new button, and append that row as a child of the container.
Here's how you can do it.
var count = 1;
var name = 'Generated Name';
function addNewRow() {
var container = document.getElementById('container');
var newRow = document.createElement('tr');
newRow.innerHTML = "<td>" + name + (count++) + "</td><td><button>Choose another thing</button></td>"
container.appendChild(newRow);
}
<html>
<head></head>
<body>
<div style="padding: 2rem;">
<table id="container">
</table>
</div>
<button onclick="addNewRow();">Add Additional</button>
</body>
</html>
I want to make a button (out of divs) and a paragraph (or any text field) below the divs that counts the clicks.
$(document).ready(function() {
$('#butt').mousedown(function() {
$("#butt").hide();
});
$("#pushed").mouseup(function() {
$("#butt").show();
});
$("#butt").click(function() {
button_click();
});
});
var clicks = 0;
function button_click() {
clicks = parseInt(clicks) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Clicks:" + clicks;
}
<!-- <link type="text/css" rel="stylesheet" href="CSS.css"/> -->
<form name="ButtonForm">
<div id="container">
<div id="pushed"></div>
<div id="butt"></div>
</div>
<div id="showCount"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script src="Untitled-1.js" type="text/javascript"></script>-->
</form>
Your div elements are empty and there is no CSS to give them any explicit size, so they will never be visible for you to click on them.
Also, the mousedown event handler can and should be combined with the click handler for butt and the mouseup event handler should just be a click event as well.
Additionally, you only need to update the number of clicks, not the word "Clicks", so make a separate placeholder for the number with a span element and then you can hard-code the word "Clicks" into the div.
Lastly, to increment a number by one, you can just use the pre or post-increment operator (++).
$(document).ready(function() {
var clicks = 0;
var divData = $("#clickCount");
$("#pushed").on("click", function() {
$("#butt").show();
});
$("#butt").on("click", function() {
$("#butt").hide();
clicks++; // increment the counter by one
divData.html(clicks);
});
});
#pushed, #butt {height:50px; width:150px; background-color:green; margin:5px;}
<body>
<form name="ButtonForm">
<div id="container">
<div id="pushed"></div>
<div id="butt"></div>
</div>
<div id="showCount">Clicks <span id="clickCount"></span></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
</form>
</body>
First of all, you should simplify your code. Hiding and showing the button is not necessary to produce the result you are looking for.
Second, change the #butt element to an actual button so that you have something to see and click.
Third, make sure your script is loading after jquery is included.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<button id="butt">I'm a button</button>
<div id="showCount"></div>
<script>
$(document).ready(function() {
$("#butt").click(function() {
button_click();
});
var clicks = 0;
function button_click() {
clicks = parseInt(clicks) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Clicks:" + clicks;
}
});
</script>
I basically would like to disable the Rollout and rollover function after I clicked. I tried an if argument but I can't get it to work. Sorry I am a real beginner in this.
I already achieved to change a text with the click in mother div but still can't disable other functions.
<!DOCTYPE html>
<html>
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<script>
var Enabled = true;
function down()
{
document.getElementById("button").src = "images/click.png"; }
var Enabled = true;
function rollover()
{
if(Enabled == true)
{
document.getElementById("button").src = "images/on.png";
}else
{
document.getElementById("button").src = "images/click.png";
}
}
var Enabled = true;
function rollout()
{
if(Enabled == true)
{
document.getElementById("button").src = "images/off.png";
}else
{
document.getElementById("button").src = "images/click.png";
}
}
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
<script/>
<body>
<h1>My Web Page</h1>
<div class="test1">
<button type="button" onclick="myFunction()">Try it</button>
</div>
<div class="row">
<div class="col"><p id="demo">A Paragraph</p></div>
<div class="col"><img src="images/off.png" id="button"
onMouseOver="rollover ()" onMouseOut="rollout ()"
onMouseDown="down()"
onClick="myFunction()"
onClick="this.innerHTML=down()
onMouseUp="rollover ()";/></div>
<div class="col">col3</div>
</div>
</body>
</html>
Check this out solution, When clicked it calls down() which sets Enabledto false and chages the image, now when you rollover and rollout it checks if Enabled is true, if it isn't it wont change the image.
function down(ele)
{
ele.src = "//placekitten.com/50/30"; //Clicked
Enabled = false; }
I found the hoooooly grail:)
Its a little tricky solution but works:)
I change the div instead of disabling the functions of the button states.
So here it is:
function showDiv() {
document.getElementById('button2').style.display = "block";
document.getElementById("button").style.display = "none";
}
Button2 is now the clicked button state, button is the div where all the other states are in. This way it stays in the clicked state after clicking and I get rid of the other button states after clicking:)
I want to modify the below code so that selected_users remains unique after append. That is, let's append a user U to selected_users only if selected_users does not already contain a U.
The below code you can copy and paste and it will work. All dependencies are on cdns.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
div { width : 200px }
.selected { background-color:blue; }
</style>
<script>
$(document).ready(function() {
$("#add").on("click", function() {
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
});
$("#remove").on("click", function() {
var selected_users = $("#selected_users > p");
selected_users.remove();
});
$("p").click(function() {
if( $(this).hasClass("selected") ) {
$(this).removeClass("selected");
}
else {
$(this).addClass("selected");
}
});
});
</script>
</head>
<div id="users">
<p class="1">User 1</p>
<p class="2">User 2</p>
<p class="3">User 3</p>
<p class="4">User 4</p>
<p class="5">User 5</p>
</div>
<div>
<input type="button" value=">>" id="add"/>
<input type="button" value="<<" id="remove"/>
</div>
<div id="selected_users">
</div>
You could do something like this:
$("#add").on("click", function()
{
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
if(!selected_users.find(users).lenght())
{
selected_users.append(users.clone().removeClass("selected"));
}
});
Forms like this commonly remove the item from the source list when adding it to the target list.
This sort of behavior would prevent the need to do the check, as it would be impossible to add the duplicate to your selected_users list.
Your code would look something like this for selecting/deselecting a user:
$("#add").on("click", function() {
var users = $("#users > p.selected");
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
users.remove();
});
$("#remove").on("click", function() {
var selected_users = $("#selected_users > p");
var users = $("#users");
users.append(selected_users.clone());
selected_users.remove();
});
NOTE: I have not tested the above code.
If you wanted to maintain the order of users in each of your list, you could do a sort on either list when adding to it, or you could maintain the visibility property of each user rather than actually removing/adding them from either list.
Simple solution is to remove form the list on the left hand side.
If you don;t want to do that. Try this. The idea is to assign ids to be able to check.
$("#add").on("click", function() {
var users = $("#users > p.selected");
users.uniqueId();//assigns unique id if they don't have one
//you can do above step somewhere else also for performance reasons
var selected_users = $("#selected_users");
selected_users.append(users.clone().removeClass("selected"));
users.each(function(user) {
var id = user.attr('id');
var exists = $("#selected_users > [selectedid="+id+"]);
if (! exists || exists.length <= 0 ) {
selected_users.append(
user.removeClass("selected").
removeAttr("id").
attr('selectedid',id));
}
});
});