phbk Posted May 7, 2019 Share Posted May 7, 2019 Hi. I have tried to evolve on the beautiful script: https://www.w3schools.com/howto/howto_js_todolist.asp Lets say it's a shopping list. How do I add static buttons, preferrably in a left column, so when I click Milk, Milk will appear on the list. I like that I can write what's needed in the textfield, but I like an option to click buttons, instead of writing eg. Sugar, Milk, Potatoes etc. Then I could have a list of buttons to the left, where I can click the buttons, and add text to list. And if possible, it would be awesome to click a button, and copy all in the list to clipboard, ort present the list in a new window or iframe. I have tried to re-use the html part, but adding buttons instead, with value of eg. "Sugar" but it keep saying I need to write something, and when I do, it still won't add Sugar to the list. What am I doing wrong? Can someone help me out? My understanding in Java is very very limited, css somewhat ok and html better. Still cannot work this thing out. I thank you in advance. Link to comment Share on other sites More sharing options...
phbk Posted May 10, 2019 Author Share Posted May 10, 2019 Noone have a solution to this? Link to comment Share on other sites More sharing options...
justsomeguy Posted May 10, 2019 Share Posted May 10, 2019 Change the function to add a new item so that you pass the value in instead of getting it from the input. You can still use it with the regular add button: addItem(document.getElementById("myInput").value); Or you can call it with whatever other value you want: addItem('Milk'); Link to comment Share on other sites More sharing options...
phbk Posted May 13, 2019 Author Share Posted May 13, 2019 Hi Jutsomeguy. Thank you, ill try that. I am unfortunately not too good at Java, but every experience makes it better Thanks Link to comment Share on other sites More sharing options...
phbk Posted May 13, 2019 Author Share Posted May 13, 2019 (edited) ok, I have used your input and have a working version. However, 2 questions: Is there any way to rewrite java code so I don't need to add 1 java chapter for every button? I mean function addWater() , function addMilk() etc. Secondly, what is the code to add the Remove item ( the x ) et the end of each line, automatically? Sorry, i guess my question is simple and obvious, but I fail to get it to work as intended. Here is the code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dynamically add/remove items from list - JavaScript</title> </head> <body> <input type="text" id="candidate"/> <button onclick="addItem()">add item</button> <button onclick="removeItem()">remove item</button> <button onclick="addWater()">Water</button> <button onclick="addMilk()">Milk</button> <ul id="dynamic-list"></ul> <script src="script.js"></script> </body> </html> and my script.js : function addItem(){ var ul = document.getElementById("dynamic-list"); var candidate = document.getElementById("candidate"); var li = document.createElement("li"); li.setAttribute('id',candidate.value); li.appendChild(document.createTextNode(candidate.value)); ul.appendChild(li); } function removeItem(){ var ul = document.getElementById("dynamic-list"); var candidate = document.getElementById("candidate"); var item = document.getElementById(candidate.value); ul.removeChild(item); } function addWater() { var node = document.createElement("LI"); var textnode = document.createTextNode("Water"); node.appendChild(textnode); document.getElementById("dynamic-list").appendChild(node); } function addMilk() { var node = document.createElement("LI"); var textnode = document.createTextNode("Milk"); node.appendChild(textnode); document.getElementById("dynamic-list").appendChild(node); } Edited May 13, 2019 by phbk Link to comment Share on other sites More sharing options...
justsomeguy Posted May 13, 2019 Share Posted May 13, 2019 Make addItem general, don't get the value to add from the page: function addItem(text){ var ul = document.getElementById("dynamic-list"); var li = document.createElement("li"); li.setAttribute('id',text); li.appendChild(document.createTextNode(text)); ul.appendChild(li); } The point is to remove the code that might change any time you want to call it, and instead pass those values to it. Now you pass the value that you want to the function: addItem('Milk'); addItem('Water'); addItem(document.getElementById("candidate").value); <button onclick="addItem(document.getElementById('candidate').value)">add item</button> <button onclick="removeItem()">remove item</button> <button onclick="addItem('Water')">Water</button> <button onclick="addItem('Milk')">Milk</button> Link to comment Share on other sites More sharing options...
phbk Posted May 14, 2019 Author Share Posted May 14, 2019 (edited) omg, thank you so much, I now see my error, Java need to know that it's addItem (water), and not just "Water" You have helped me alot to understand Java better, Thank you so much for your time. I am very happy with your reply I just testet it, and it works as a charm Thank you again, I might have more questiongs, but if it's not related to this, and I cannot find a solution, I'll make a new tread of course. You have a good way of explaining, and you removed my headache Edited May 14, 2019 by phbk Link to comment Share on other sites More sharing options...
justsomeguy Posted May 14, 2019 Share Posted May 14, 2019 No problem. Just so you're aware, this is Javascript. Java is a completely unrelated language. Link to comment Share on other sites More sharing options...
phbk Posted May 16, 2019 Author Share Posted May 16, 2019 yes sorry, Javascript, thanks I ended giving up to implement the X at the end of each line, to remove that line, but I can't get it to work. If you could help with that as well, I will really appriciate it, if not, no problem, you allready helped me plenty I can still remove by typing the name of the item that needs to get removed Link to comment Share on other sites More sharing options...
justsomeguy Posted May 16, 2019 Share Posted May 16, 2019 You can add another node to the new li node, put an X or whatever content you want in it, and it needs a click handler to find its parent li node and remove that from the list. Link to comment Share on other sites More sharing options...
phbk Posted May 28, 2019 Author Share Posted May 28, 2019 (edited) Thank you again. I had a problem, but solved it by myself. It was similar to the one you made, but with custom text in it. Solved it with: <button onclick="addItem('REMEMBER ' + document.getElementById('itemName').value)">add item</button> Thanks for your help Edited May 28, 2019 by phbk Link to comment Share on other sites More sharing options...
justsomeguy Posted May 28, 2019 Share Posted May 28, 2019 document.getElementById('addItem') doesn't refer to an element. It looks like you also have an extra quote at the end of that onclick attribute. Link to comment Share on other sites More sharing options...
phbk Posted June 12, 2019 Author Share Posted June 12, 2019 Hi, sorry for the delay in aswer, I have been away for some time. The custom text is in line 18. My code is: <html ng-app> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="formlist.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script> <!-- https://angularjs.org/ --> </head> <body> <input type="text" ng-model="itemName" placeholder="REMEMBER THIS"><br> <input type="text" id="candidate" placeholder="Add unlisted item"></div><br> <button onclick="addItem(document.getElementById('candidate').value)">add item</button> <button onclick="removeItem()">remove item</button> <button onclick="addItem('> Milk')">Milk</button> <button onclick="addItem('> Sugar')">Sugar</button> <button onclick="addItem('REMEMBER ' + document.getElementById('itemName').value)">REMEMBER {{itemName}}</button> <ul id="dynamic-list" class="copybox"></ul> <script> function addItem(){ var ul = document.getElementById("dynamic-list"); var candidate = document.getElementById("candidate"); var li = document.createElement("li"); li.setAttribute('id',candidate.value); li.appendChild(document.createTextNode(candidate.value)); ul.appendChild(li); } function removeItem(){ var ul = document.getElementById("dynamic-list"); var candidate = document.getElementById("candidate"); var item = document.getElementById(candidate.value); ul.removeChild(item); } function addItem(text) { var ul = document.getElementById("dynamic-list"); var li = document.createElement("li"); li.setAttribute('id',text); li.appendChild(document.createTextNode(text)); ul.appendChild(li); } </script> </body> </html> This seems to work as intended. Should I approch this differently? Also, I have abandoned the X at the end. Had a little X image to be added after or infront of each line, but coudn't get it to work. If you have a solution, I'd be happy. Also if there was a way to edit something in the middle of the list, withoput having to redo it all again. Thank you for all your help. I appriciate it so much. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 12, 2019 Share Posted June 12, 2019 You've got 2 functions with the same name, that's an issue. If you want to remove or edit something then start with a button or other link that you create when you create that item and put a click handler on it, start there and make sure you can run the click handler. The handler should be able to figure out which element was clicked on and get the corresponding li to remove or edit. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now