Change text and color of dynamically created button
Question
I have a red button that is dynamically created and put into a li along with some user input. Looks like this
If the user clicks on the red button, the li element is prepended to another li like this
I want to be able to change the button from red to green and change the text from 'started' to 'unmark' when it moves to the second li and then back to red with the right text if that button is clicked again to move it back.
I'm not quite sure where to write the function to do this? Should I do this outside of my previous written functions or within each relevant ones? And if so, what would it look like because my button only has an id and no value, which is the method I've seen all over stackoverflow.
Thank you!
Edit: Code Snippet It looks like it's not showing the second column (configurations are all off)... does it work on other's people laptops?
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit' $(document).ready( $("#new-item").on('click', function() { // once the document loads, create new item with this function var text = $('#task').val(); if (text != '') { $('#todo-list').prepend("<li class='addedTask'> <button id='started' value='on'>Started</button>" + text + '</li>'); } }) ); // Clicking on the 'started' button will move the task from 'todo-list' to 'doing-list' $("#todo-list").on('click', "button", function() { var completedItem = $(this).parent(); $('#doing-list').prepend($(completedItem)); }); // Clicking on the 'unmark' button will moe the task back from 'doing-list' to 'todo-list' $("#doing-list").on('click', "button", function() { var completedItem = $(this).parent(); $('#todo-list').prepend($(completedItem)); });
header { background-color: #026aa7; height: 30px; text-align: center; padding: 5px 8px; } header a { height: 30px; width: 80px; text-align: center; background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png); background-repeat: no-repeat; text-align: center; display: inline-block; background-size: 80px 30px; } body { background-color: #0078c0; margin: 0px; font-family: sans-serif; } /*Add a card button*/ #new-item { position: relative; left: 40px; top: 20px; font-family: sans-serif; padding: 4px; width: 100px; background-color: #ffffff; border-radius: 4px; } /*User input*/ #task { position: relative; left: 25px; top: 20px; height: 20px; width: 200px; padding: 10px; border-radius: 4px; padding-left: 4px; } .column { background-color: #E3E3E3; min-height: 75px; width: 25%; display: inline-block; position: relative; margin: 5px; vertical-align: top; top: 75px; right: 287px; border-radius: 5px; } .column h1 { font-size: 20px; padding-left: 10px; position: relative; color: #393939; margin: 5px; } li { list-style-type: none; margin-left: 8px; text-indent: 10px; } li.addedTask { border: 1px solid white; border-radius: 4px; padding: 15px; width: 83%; background-color: white; margin-bottom: 15px; } /*Cards in the todo list*/ #started { float: left; background-color: #E65C5C; border-radius: 6px; border: none; }
<head> <title> HW03 Javascript and jQuery </title> <link rel="stylesheet" href="_css/style.css"> </head> <body> <header> <a href="https://trello.com"></a> </header> <section> <!-- create input tag for user input --> <input type="text" id="task"> <!-- button takes input and adds a new element with content to 'list_do' --> <button id="new-item"> Add a card </button> <!-- ability to move items between list_todo and list_doing --> <div class="column" id="to-do"> <h1> To Do </h1> <li id="todo-list"></li> </div> <div class="column" id="doing"> <h1> Doing </h1> <li id="doing-list"></li> </div> </section> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="_js/main.js"> </script> </body>
1 answers
solution1
0 ACCPTED 2018-02-16 00:30:28
you can do something like this:
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit' $(document).ready( $("#new-item").on('click', function() { // once the document loads, create new item with this function var text = $('#task').val(); if (text != '') { $('#todo-list').prepend("<li class='addedTask unmark'> <button id='started' value='on'>Started</button>" + text + '</li>'); } }) ); // Clicking on the 'started' button will move the task from 'todo-list' to 'doing-list' $("#todo-list").on('click', "button", function() { var completedItem = $(this).parent(); change(completedItem, true); $('#doing-list').prepend($(completedItem)); }); // Clicking on the 'unmark' button will moe the task back from 'doing-list' to 'todo-list' $("#doing-list").on('click', "button", function() { var completedItem = $(this).parent(); change(completedItem, false); $('#todo-list').prepend($(completedItem)); }); function change(selector, isMarked) { if(isMarked) { $(selector).removeClass('unmark'); $(selector).addClass('mark'); } else { $(selector).removeClass('mark'); $(selector).addClass('unmark'); } }
header { background-color: #026aa7; height: 30px; text-align: center; padding: 5px 8px; } header a { height: 30px; width: 80px; text-align: center; background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png); background-repeat: no-repeat; text-align: center; display: inline-block; background-size: 80px 30px; } body { background-color: #0078c0; margin: 0px; font-family: sans-serif; } /*Add a card button*/ #new-item { position: relative; left: 40px; top: 20px; font-family: sans-serif; padding: 4px; width: 100px; background-color: #ffffff; border-radius: 4px; } /*User input*/ #task { position: relative; left: 25px; top: 20px; height: 20px; width: 200px; padding: 10px; border-radius: 4px; padding-left: 4px; } .column { background-color: #E3E3E3; min-height: 75px; width: 25%; display: inline-block; position: relative; margin: 5px; vertical-align: top; top: 75px; right: 287px; border-radius: 5px; } .column h1 { font-size: 20px; padding-left: 10px; position: relative; color: #393939; margin: 5px; } li { list-style-type: none; margin-left: 8px; text-indent: 10px; } li.addedTask { border: 1px solid white; border-radius: 4px; padding: 15px; width: 83%; background-color: white; margin-bottom: 15px; } /*Cards in the todo list*/ #started { float: left; border-radius: 6px; border: none; } .mark button { background-color: green; } .unmark button { background-color: #E65C5C; }
<head> <title> HW03 Javascript and jQuery </title> <link rel="stylesheet" href="_css/style.css"> </head> <body> <header> <a href="https://trello.com"></a> </header> <section> <!-- create input tag for user input --> <input type="text" id="task"> <!-- button takes input and adds a new element with content to 'list_do' --> <button id="new-item"> Add a card </button> <!-- ability to move items between list_todo and list_doing --> <div class="column" id="to-do"> <h1> To Do </h1> <li id="todo-list"></li> </div> <div class="column" id="doing"> <h1> Doing </h1> <li id="doing-list"></li> </div> </section> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="_js/main.js"> </script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Change text from dynamically created button in jQuery
How to change color of the selected text dynamically on click of button?
Change text in dynamically created textbox
Change text color dynamically AngularJS
CSS - change the color of a text dynamically
How to change the color of text dynamically?
Dynamically change color of text in cordova
In Polymer can I make a dynamically created paper-button change color when I click it?
want to change the color of dynamically created button on specific id which is pass by the array
Display dynamically created text box on dynamically created radio button with JavaScript
Related Tags