Jump to content

todo list, with static buttons?


phbk

Recommended Posts

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

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

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 by phbk
Link to comment
Share on other sites

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

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 :D

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 by phbk
Link to comment
Share on other sites

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

  • 2 weeks later...

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 by phbk
Link to comment
Share on other sites

  • 2 weeks later...

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...