Transferring an object from one inventory to another

Question

Transferring an object from one inventory to another

I'm in the process of developing a task manager that enables users to add and remove tasks. I am also working on enabling the ability for users to transfer tasks from one list to another. The current code I have written doesn't seem to be functioning as expected, and I suspect there might be an issue within my JavaScript implementation.

HTML:

<input type='checkbox' id="togglelist1" class='arrow'/>
  <label for="list1menu">
    <input type="text" name="newlist1" value="" spellcheck="false" placeholder="New List" id="newlist1">
    <ul id="list1UL">
      <li><input type="checkbox" id="newlist1item" class="right-margin"/><label>List1</label> <button type="button" class="deletelist"> </button> <button type="button" class="addtolist2"></button></li>
    </ul>
  </label>

<input type='checkbox' id="togglelist2" class='arrow'/>
<label for="list2 menu">
  <ul id="list2UL" class='list2UL'>
    <li><input type="checkbox" id="newlist2item" class="right-margin"/><label>List2</label> <button type="button" class="deletelist"></button></li>
  </ul>
</label>

JavaScript:

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newList1 = $(this).val();
      if (newList1) {
        var li = $("<li><input type='checkbox' id='newlist1item' class='right-margin'/><label>List1</label> <button type='button' class='deletelist'> </button> <button type='button' class='addtolist2'></button></li>");
        $('#list1UL').append(li);
        $(this).val("");
        localStorage.setItem("list1UL", value);
      }
    }
  });
  $(document).on("click", ".deletelist", function() {
    $(this).parent().remove();
  });
  $(".addtolist2").on( "click", function() {
    $(".addtolist2").css("opacity", 1.5 - $(".addtolist2").css("opacity"));
    $(".addtolist2").toggleClass("list2UL");
    $('#list1UL input:checked').parent().clone().appendTo('#list2UL');
});
});

CSS:

#togglelist1 {
  cursor: pointer;
  position: absolute;
  background: url('list1.png') no-repeat;
  height: 30px;
  width: 30px;
  background-size: 100%;
  display: none;
}

#togglelist2 {
  cursor: pointer;
  position: absolute;
  background: url('addtolist2.png') no-repeat;
  background-size: 100%;
  display: none;
}

____List 1____

label[for="list1menu"] {
  display: none;
  text-decoration: none;
  position: absolute;
  bottom: 250px;
  left: 250px;
  width: 680px;
  height: 540px;
}

...

____List 2____

label[for="list2menu"] {
  display: none;
  text-decoration: none;
  position: absolute;
  bottom: 250px;
  left: 250px;
  width: 680px;
  height: 540px;
}

...

javascript html css google-chrome-extension

Answer 1

Answer №1

Here is a simple solution for task management that allows you to add, edit, and delete tasks easily.

//Document is the DOM can be accessed in the console with document.window.
// Tree is from the top, html, body, p etc.

//Problem: User interaction does not provide the correct results.
//Solution: Add interactivity so the user can manage daily tasks.
//Break things down into smaller steps and take each step at a time.


//Event handling, uder interaction is what starts the code execution.

var taskInput=document.getElementById("new-task");//Add a new task.
var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks


//New task list item
var createNewTaskElement=function(taskString){

var listItem=document.createElement("li");

//input (checkbox)
var checkBox=document.createElement("input");//checkbx
//label
var label=document.createElement("label");//label
//input (text)
var editInput=document.createElement("input");//text
//button.edit
var editButton=document.createElement("button");//edit button

//button.delete
var deleteButton=document.createElement("button");//delete button

label.innerText=taskString;

//Each elements, needs appending
checkBox.type="checkbox";
editInput.type="text";

editButton.innerText="Edit";//innerText encodes special characters, HTML does not.
editButton.className="edit";
deleteButton.innerText="Delete";
deleteButton.className="delete";
...


/* Styling */
body {
  background: #fff;
  color: #333;
  font-family: Lato, sans-serif;
}
.container {
  display: block;
  width: 400px;
  margin: 10px auto 0;
}
...

<html>
  <head>
    <title>Todo App</title>

  </head>
  <body>
    <div class="container">
      <p>
        <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
      </p>
      
      <h3>Todo</h3>
      <ul id="incomplete-tasks">
        <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        ...
        
      </ul>
      
      <h3>Completed</h3>
      <ul id="completed-tasks">
        <li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
      </ul>
...

Answer 2

Here is a simple solution for task management that allows you to add, edit, and delete tasks easily.

//Document is the DOM can be accessed in the console with document.window.
// Tree is from the top, html, body, p etc.

//Problem: User interaction does not provide the correct results.
//Solution: Add interactivity so the user can manage daily tasks.
//Break things down into smaller steps and take each step at a time.


//Event handling, uder interaction is what starts the code execution.

var taskInput=document.getElementById("new-task");//Add a new task.
var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks


//New task list item
var createNewTaskElement=function(taskString){

var listItem=document.createElement("li");

//input (checkbox)
var checkBox=document.createElement("input");//checkbx
//label
var label=document.createElement("label");//label
//input (text)
var editInput=document.createElement("input");//text
//button.edit
var editButton=document.createElement("button");//edit button

//button.delete
var deleteButton=document.createElement("button");//delete button

label.innerText=taskString;

//Each elements, needs appending
checkBox.type="checkbox";
editInput.type="text";

editButton.innerText="Edit";//innerText encodes special characters, HTML does not.
editButton.className="edit";
deleteButton.innerText="Delete";
deleteButton.className="delete";
...


/* Styling */
body {
  background: #fff;
  color: #333;
  font-family: Lato, sans-serif;
}
.container {
  display: block;
  width: 400px;
  margin: 10px auto 0;
}
...

<html>
  <head>
    <title>Todo App</title>

  </head>
  <body>
    <div class="container">
      <p>
        <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
      </p>
      
      <h3>Todo</h3>
      <ul id="incomplete-tasks">
        <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        ...
        
      </ul>
      
      <h3>Completed</h3>
      <ul id="completed-tasks">
        <li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
      </ul>
...

Answer 3

Answer №2

Seems like there is an issue with your JavaScript code in this section

$(".addtolist2").on( "click", function() {
  $(".addtolist2").css("opacity", 1.5 - $(".addtolist2").css("opacity"));
  $(".addtolist2").toggleClass("list2UL");
 $('#list1UL input:checked').parent().clone().appendTo('#list2UL');
});

The first two lines are handling CSS changes and toggling classes when the button is clicked, but the third line seems to be doing something unusual. It appears that you're trying to copy an item from the first list to the second list when the corresponding button next to it is clicked.

If that's the case, here is a corrected version of the code snippet for achieving the same functionality:

$("addtolist2").on("click", function(){
 $(this).parent().clone().appendTo("#list2UL");
});

Please keep in mind that this code does not remove the original element from list1. If you want to also remove it, you can add $(this).parent().remove()

Answer 4

Seems like there is an issue with your JavaScript code in this section

$(".addtolist2").on( "click", function() {
  $(".addtolist2").css("opacity", 1.5 - $(".addtolist2").css("opacity"));
  $(".addtolist2").toggleClass("list2UL");
 $('#list1UL input:checked').parent().clone().appendTo('#list2UL');
});

The first two lines are handling CSS changes and toggling classes when the button is clicked, but the third line seems to be doing something unusual. It appears that you're trying to copy an item from the first list to the second list when the corresponding button next to it is clicked.

If that's the case, here is a corrected version of the code snippet for achieving the same functionality:

$("addtolist2").on("click", function(){
 $(this).parent().clone().appendTo("#list2UL");
});

Please keep in mind that this code does not remove the original element from list1. If you want to also remove it, you can add $(this).parent().remove()

Transferring an object from one inventory to another

Answer №1

Answer №2

Similar questions

How can I stop iOS mobile browsers from automatically opening apps when I click on links?

Issue encountered: Unforeseen command: POST karma

Generate a custom comment page for every URL identifier

Is there a way to change a mandatory field to optional in SuiteCRM?

Concealing the ellipsis in the will_paginate function of Rails

Setting up redux with Next.js: a step-by-step guide

Encountering a Typescript error while attempting to remove an event that has a FormEvent type

What is the process for cancelling a pending request using jQuery in JavaScript Selenium?

capturing the value of a button during the onChange event

What is the process for incorporating the !important declaration into a CSS-in-JS (JSS) class attribute?

Placing a moveable object in a designated spot for dropping at the desired location

Having trouble with the border styling on my HTML input form

Inquiry to an outside domain

Move the camera in Three.js along a path between two vectors

PHP receive apostrophe from $_GET array

Display a loading spinner dialog using Jquerymobile until the page finishes loading

Identifying Inaccurate Device Date Using JavaScript

What is the best way to manage events within datalist options using Vue.js?

Is there a way to modify the standard width of semantic-ui sidebars?

Avoid Updating State After Adding Row in material-table