i have created text filed row in create function . i added delete button in create() function that calls delete when click on button. any help?
<body>
<input type="button" value="createDiv" onclick="create()"/>
</body>
<script type="text/javascript" defer="defer">
function create()
{
var newDiv = document.createElement('div');
newDiv.innerHTML = "<table id='e' border><tr><td><input type='text'><button onclick=del(this.value)</button></td></tr></table>";
// newDiv.className = 'newClass';
document.body.appendChild(newDiv);
}
function del (e) {
if ('function' === typeof e.remove) {
return e.remove();
}
return e.parentNode.removeChild(e);
}
Change:
<button onclick=del(this.value)
to:
<button onclick='del(this)'>
DEMO
Two problems:
You were missing the closing >.
The del function expects to receive the element to delete. The value of the element is not appropriate, especially since the button doesn't have a value.
I'm not sure this will do what you really want. This will just remove the button, it won't remove the table row. If you want to remove the whole table, you need to go up several levels of parentNode until you reach the <table> element.
Also, you should always enclose attribute values in quotes. In this case it works without them, because there are no spaces in the value, but you should get in the habit.
If you want to delete the row then the code should be something like this...
<script type="text/javascript" defer="defer">
function create()
{
var newDiv = document.createElement('div');
var rowId = "someId";
var output = "<table id='e' border><tr id='"+rowId+"'><td ><input type='text'><button onclick=del('"+ rowId +"')>delete</button></td></tr></table>";
newDiv.innerHTML = output;
newDiv.className = 'newClass';
document.body.appendChild(newDiv);
}
function del (id) {
var div = document.getElementById(id);
div.parentNode.removeChild(div);
}
</script>
If so you have done lot of mistake as Barmar Said.
I guess you are missing the quotes and the Button Tag Close tag '>'
<button onclick='del(this.value)'></button>
The HTML code for your button is incorrect. You don't have a closing bracket for the tag, and as there are no delimiters around the onclick attribute value, the closing tag will be part of the value, causing a syntax error in the script.
Try like this:
newDiv.innerHTML = '<table id="e" border><tr><td><input type="text"><button onclick="del(this.value)"></button></td></tr></table>';
Related
I have a news blog on asp-net.
There is a spoiler to the news. There are some news with spoilers on the page. However, if I click on any spoiler (first, second, third), then only the first opens in any case. I understand that it because of all buttons and fields have the same id. How can I implement the connection between the button and the spoiler? A specific spoiler must be opened after clicking on it, but not the first.
<div>
<label>Body</label>
<button type="button" id="button">Add spoiler</button>
<textarea id="spoilerField" asp-for="Body"></textarea>
</div>
#section scripts {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var textarea = document.getElementById("spoilerField");
var button = document.getElementById("button");
button.onclick = function () {
var len = textarea.value.length,
start = textarea.selectionStart,
end = textarea.selectionEnd,
sel = textarea.value.substring(start, end),
replace = '<input type="checkbox" id="spoiler2"/><label for="spoiler2">SEE SPOILER</label><div class="spoiler">' + sel + '</div>';
textarea.value = textarea.value.substring(0, start) + replace + textarea.value.substring(end, len);
}
</script>
}
You should still make those ids unique regardless, you could, for example, add elements to the page using a for loop with Razor and an index and joining the 2.
The id would then look something like:
id="spoiler_#i"
That aside, you should be looking at querySelectorAll or getElementsByClassName to select those elements and do what you need to do.
I'm trying to make a 'CRUD' in pure Javascript, it's almost done, the only thing that I need is preparing the inputs with the value of <li>, to do it, I'd like to add an onclick event in a checkbox that is created dynamically in the function insert(), but everytime I click the checkbox nothing happens.
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
btnInsert = document.getElementById("btnInsert");
btnEdit = document.getElementById("btnEdit");
btnDelete = document.getElementById("btnDelete");
vname = document.getElementById("tbName");
ul = document.getElementsByTagName("ul")[0];
btnInsert.onclick = insert;
btnDelete.onclick = remove;
}
function insert(){
li = document.createElement("li");
li.innerHTML = vname.value;
li.innerHTML += " <input type='checkbox' onclick='select()' value='Select' /> Update";
ul.appendChild(li);
vname.value = "";
}
function select(){
alert("Checked");
}
function remove(){
var lis = document.getElementsByTagName("li");
for(i = 0; i<lis.length; i++){
lis[i].onclick = function(){
this.remove();
}
}
}
</script>
</head>
<body>
<label for="tbName">Name: </label>
<input name="tbName" id="tbName"/><br /><br />
<button id="btnInsert">Insert</button>
<button id="btnEdit">Edit</button>
<button id="btnDelete">Delete</button>
<br /><br />
<ul>
</ul>
</body>
</html>
It seems the name select is causing conflict since I could get your code working with the following changes:
HTML
li.innerHTML += " <input type='checkbox' onclick='sel()' value='Select' />Update";
Javascript
function sel(){
alert("Checked");
}
Further tests show that if we log the contents of the function with:
li.innerHTML += " <input type='checkbox' onclick='console.log(select.toString)' value='Select' />Update";
the console shows the following
function select() { [native code] }
So my guess is that select is the name of a function already defined by the browser, hence why you can't use it as a name for your functions.
In short, your code triggers another select function, not the one you defined in your source code.
The OP doesn't want it to fire on the LI, he wants it to fire on the checkbox!
Give your dynamic checkbox an ID value like chkBox1.
Now after you have appended it to the document, you can call it with:
var thechkBox=document.getElementById("chkBox1");
Now you can hit thechkBox with:
thechkBox.addEventListener("click", itfired); //itfired is the script that captures the click event.
That is one of many Events you would then have access to (https://www.w3schools.com/js/js_htmldom_events.asp)!
If you needed the dynamic checkbox to perform a function "on"click!
I am trying to spawn different div's and remove them after they do their job. A simple version of my code is:
function eraseDiv(){
var c = document.getElementById("cn1");
c.parentNode.removeChild(child);
}
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.id = "child";
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<a href=\"?\" onclick=eraseDiv(); return false; > Delete</a>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
<input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>'
The problem is that when the first spawned div is deleted, all div's are deleted. Any help is appreciated on how to fix this.
How about something like this:
function eraseDiv(target){
var div = target.parentNode;
var container = div.parentNode;
container.removeChild(div);
}
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<button onclick=eraseDiv(this);> Delete</button>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
<button type="button" name="submit" onclick="spawnDiv();">Spawn</button>
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>
First thing, since you're returning false every time you obviously don't want to use the submit functionality of your submit input, so change it to a button instead.
Second thing, remove the ID from the spawned div since you should never have two divs with the same ID.
Third thing (like the first thing) since you're not using the link functionality of the anchor element, you should change it to a button instead (using CSS you can style this like an anchor if you want to).
Fourth thing, inside the delete button, add this as a parameter to the eraseDiv function. You can now access the button that was clicked using the function parameter rather than trying to find it by an ID.
The simplest fix to your code without modifying the functionality (and view of the page) of what you did is to replace the href="?" with href="#".
In your original code, when you do something like link with the "?" as the hyperlink, this actually performs a GET request which will reload the page. This is tricky because it makes it seem like your delete code is removing all the spawned divs from both cn1 and cn2 divs.
Changing the href=? to href=# prevents a GET request from happening. Below is a snippet that directly makes this change that results in the correct behavior of your original code (by deleting the spawned element in cn1). You will have to further modify your code to make it do what you want.
function eraseDiv(){
var c = document.getElementById("cn1");
c.parentNode.removeChild(c);
}
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.id = "child";
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<a href=\"#\" onclick=eraseDiv(); return false; > Delete</a>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
<input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>
Another way of doing it would be to create a id for div like this
<html>
<body>
<input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>
<script>
function eraseDiv(j){
var c = document.getElementById('child'+j);
c.parentNode.removeChild(c);
}
var i=1;
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.id = "child"+i;
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<u ><a onclick=eraseDiv("+i+++"); > Delete</a></u>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
</script>
</body>
</html>
Im fairly new to javascript and i'm trying to do a simple function where my div can be changed with a click of a link. Everything works fine except for when I click on my first link again, it stops working. The others continue to work...
Here is my code...hope someone can help me! Thanks!
<script>
function changedivVIDEO(){
var div = document.getElementById("fw14video");
div.innerHTML = "<div id='main2'>Hello</div>";
}
function changedivCAMPAIGN(){
var div = document.getElementById("fw14campaign");
div.innerHTML = "<div id='main3'>Hello</div>";
}
function changedivRUNWAY(){
var div = document.getElementById("fw14campaign");
div.innerHTML = "<div id='main4'>Hello</div>";
}
</script>
<div id="main">
<div id="fw14video"></div>
<div id="fw14campaign"></div>
<div id="fw14runway"></div>
<div id="fw14runway"></div>
</div>
<p><h3>VIDEO</h3></p>
<p><h3>CAMPAIGN</h3></p>
<p><h3>RUNWAY</h3></p>
<p><h3>ACCESSORIES</h3></p>
</div>
I made an example that fills in the details I think are missing:
<div id="fw14video"></div>
<div id="fw14campaign"></div>
changediv1
changediv2
changediv3
<script>
function changediv1(e){
var div = document.getElementById("fw14video");
div.innerHTML = "<div id='main2'>div1</div>";
e.preventDefault();
}
function changediv2(e){
var div = document.getElementById("fw14campaign");
div.innerHTML = "<div id='main3'>div2</div>";
e.preventDefault();
}
function changediv3(e){
var div = document.getElementById("fw14campaign");
div.innerHTML = "<div id='main4'>div3</div>";
e.preventDefault();
}
</script>
This works as intended. I am using e.preventDefault() to make it not follow the links, and set text different so you can tell which got clicked. Some questions:
do you mean for the IDs to be different?
how did you bind your functions to the links? (I used onclick.)
I think this:
function changedivRUNWAY(){
var div = document.getElementById("fw14campaign");
div.innerHTML = "<div id='main4'>Hello</div>";
}
Should be:
function changedivRUNWAY(){
var div = document.getElementById("fw14runway");
div.innerHTML = "<div id='main4'>Hello</div>";
}
As a starter...and then if nothing else is missing in the code you posted there's a lose < /div> tag.
I have this code:
<div class="col3">
<a id = "training-launch-button" href="javascript:void(0);" title=" My title here" class="button" onClick="Test();">Launch</a>
</div>
function Test() {
var new_window= window.open('','Ratting','width=550,height=170,0,status=0,resizable=1');
new_window.document.createElement("div");
document.getElementsByTagName('div')[0].innerHTML = '<ol><li>html data</li></ol>';
}
something is not right, I dont see the ordered list item?
I eventually want to build some HTML in the new window.
Use this Js
function Test() {
var newWindow= window.open('','Ratting','width=550,height=170,0,status=0,resizable=1');
var newContent = "<HTML><HEAD><TITLE>One Sub Window</TITLE></HEAD>";
newContent += "<BODY><div><ol><li>html data</li></ol></div>";
newContent += "</BODY></HTML>";
newWindow.document.write(newContent);
newWindow.document.close();
}
I think this is your problem; getElementsByName returns an array, not one element, so;
new_window.document.getElementsByTagName('div')[0].innerHTML = '<ol><li>html data</li></ol>';
NB: I have a '[0]' in there
I would try
new_window.document.getElementsByTagName('div')[0].innerHTML = ...
This should do it:
var new_window= window.open('','Ratting','width=550,height=170,0,status=0,resizable=1');
var div = new_window.document.createElement('div');
new_window.document.body.appendChild(div);
div.innerHTML = '<ol><li>html data</li></ol>';
You are actually not appending the new div to the new document's body, you'll have to use .appendChild() method for that, see this :
function Test() {
var new_window = window.open('','Ratting','width=550,height=170,0,status=0,resizable=1');
var div = new_window.document.createElement("div");
new_window.document.getElementsByTagName('body')[0].appendChild(div);
div.innerHTML = '<ol><li>html data</li></ol>';
}
see here - working example