Jump to content
phbk

todo list, with static buttons?

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.

Share this post


Link to post
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');

Share this post


Link to post
Share on other sites

Hi Jutsomeguy.

Thank you, ill try that.

I am unfortunately not too good at Java, but every experience makes it better :)

Thanks :)

 

Share this post


Link to post
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

Share this post


Link to post
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>

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

No problem.  Just so you're aware, this is Javascript.  Java is a completely unrelated language.

Share this post


Link to post
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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...