I am getting [object object] but I want to make a checkmark button prepended to the “value” variable
I am playing around with making a list and I got everything prepended onto HTML but now am trying to remove them by hitting a button. What I am having issue with is prepending the button. I am confident I can remove it with logic that is not included in this snippit but any help on how to create the button would be appreciated.
window.onload = function() {
//user clicked on the add button in the to-do field add that text into the to-do text
$('#add-to-do').on('click', function(event) {
event.preventDefault();
//assign variable to the value entered into the textbox
var value = document.getElementById('to-do').value;
//test value
console.log(value);
//prepend values into the html and add checkmark, checkbox, and line break to make list
var linebreak = "<br/>";
var todoclose = $("<button>");
console.log(todoclose);
todoclose.attr("data-to-do", toDoCount);
todoclose.addClass("checkbox");
todoclose.text("☑");
$("#to-dos").prepend(todoclose + value + linebreak);
});
Below is the HTML
<div class ="col-4">
<!-- To Do List -->
<form onsubmit= "return false;">
<span id = "todo-item" type = "text">
<h4>Add your Agenda Here</h4>
<input id ="to-do" type = "text">
<input id ="add-to-do" value = "Add Item" type = "submit">
</span>
</form>
<div id="to-dos"></div>
</div>
javascript jquery html
asked Jan 2 at 3:36
Rainer FloeterRainer Floeter
4519
add a comment |
I am playing around with making a list and I got everything prepended onto HTML but now am trying to remove them by hitting a button. What I am having issue with is prepending the button. I am confident I can remove it with logic that is not included in this snippit but any help on how to create the button would be appreciated.
window.onload = function() {
//user clicked on the add button in the to-do field add that text into the to-do text
$('#add-to-do').on('click', function(event) {
event.preventDefault();
//assign variable to the value entered into the textbox
var value = document.getElementById('to-do').value;
//test value
console.log(value);
//prepend values into the html and add checkmark, checkbox, and line break to make list
var linebreak = "<br/>";
var todoclose = $("<button>");
console.log(todoclose);
todoclose.attr("data-to-do", toDoCount);
todoclose.addClass("checkbox");
todoclose.text("☑");
$("#to-dos").prepend(todoclose + value + linebreak);
});
Below is the HTML
<div class ="col-4">
<!-- To Do List -->
<form onsubmit= "return false;">
<span id = "todo-item" type = "text">
<h4>Add your Agenda Here</h4>
<input id ="to-do" type = "text">
<input id ="add-to-do" value = "Add Item" type = "submit">
</span>
</form>
<div id="to-dos"></div>
</div>
javascript jquery html
asked Jan 2 at 3:36
Rainer FloeterRainer Floeter
4519
add a comment |
I am playing around with making a list and I got everything prepended onto HTML but now am trying to remove them by hitting a button. What I am having issue with is prepending the button. I am confident I can remove it with logic that is not included in this snippit but any help on how to create the button would be appreciated.
window.onload = function() {
//user clicked on the add button in the to-do field add that text into the to-do text
$('#add-to-do').on('click', function(event) {
event.preventDefault();
//assign variable to the value entered into the textbox
var value = document.getElementById('to-do').value;
//test value
console.log(value);
//prepend values into the html and add checkmark, checkbox, and line break to make list
var linebreak = "<br/>";
var todoclose = $("<button>");
console.log(todoclose);
todoclose.attr("data-to-do", toDoCount);
todoclose.addClass("checkbox");
todoclose.text("☑");
$("#to-dos").prepend(todoclose + value + linebreak);
});
Below is the HTML
<div class ="col-4">
<!-- To Do List -->
<form onsubmit= "return false;">
<span id = "todo-item" type = "text">
<h4>Add your Agenda Here</h4>
<input id ="to-do" type = "text">
<input id ="add-to-do" value = "Add Item" type = "submit">
</span>
</form>
<div id="to-dos"></div>
</div>
javascript jquery html
asked Jan 2 at 3:36
Rainer FloeterRainer Floeter
4519
I am playing around with making a list and I got everything prepended onto HTML but now am trying to remove them by hitting a button. What I am having issue with is prepending the button. I am confident I can remove it with logic that is not included in this snippit but any help on how to create the button would be appreciated.
window.onload = function() {
//user clicked on the add button in the to-do field add that text into the to-do text
$('#add-to-do').on('click', function(event) {
event.preventDefault();
//assign variable to the value entered into the textbox
var value = document.getElementById('to-do').value;
//test value
console.log(value);
//prepend values into the html and add checkmark, checkbox, and line break to make list
var linebreak = "<br/>";
var todoclose = $("<button>");
console.log(todoclose);
todoclose.attr("data-to-do", toDoCount);
todoclose.addClass("checkbox");
todoclose.text("☑");
$("#to-dos").prepend(todoclose + value + linebreak);
});
Below is the HTML
<div class ="col-4">
<!-- To Do List -->
<form onsubmit= "return false;">
<span id = "todo-item" type = "text">
<h4>Add your Agenda Here</h4>
<input id ="to-do" type = "text">
<input id ="add-to-do" value = "Add Item" type = "submit">
</span>
</form>
<div id="to-dos"></div>
</div>
javascript jquery html
javascript jquery html
asked Jan 2 at 3:36
Rainer FloeterRainer Floeter
4519
asked Jan 2 at 3:36
Rainer FloeterRainer Floeter
4519
asked Jan 2 at 3:36
Rainer FloeterRainer Floeter
4519
asked Jan 2 at 3:36
Rainer FloeterRainer Floeter
4519
asked Jan 2 at 3:36
Rainer FloeterRainer Floeter
4519
4519
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The bug is here:
todoclose + value + linebreak
todoclose is an Object, value is a string, and linebreak is a string. That means that in the first part of that code, you are adding an Object (todoclose) with a string (value).
When you add an Object to a string, the JavaScript engine calls the object's toString method to convert it to a string first, and then adds the result to the other string. The toString method on most objects prints [object Object] (which isn't very useful).
To fix it, instead of using + to add these together, you can prepend them one at a time (in reverse order):
$("#to-dos").prepend(linebreak);
$("#to-dos").prepend(value);
$("#to-dos").prepend(todoclose);
answered Jan 2 at 3:52
SuchipiSuchipi
384416
1
perfect worked.. thanks for the help
– Rainer Floeter
Jan 2 at 3:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000938%2fi-am-getting-object-object-but-i-want-to-make-a-checkmark-button-prepended-to%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The bug is here:
todoclose + value + linebreak
todoclose is an Object, value is a string, and linebreak is a string. That means that in the first part of that code, you are adding an Object (todoclose) with a string (value).
When you add an Object to a string, the JavaScript engine calls the object's toString method to convert it to a string first, and then adds the result to the other string. The toString method on most objects prints [object Object] (which isn't very useful).
To fix it, instead of using + to add these together, you can prepend them one at a time (in reverse order):
$("#to-dos").prepend(linebreak);
$("#to-dos").prepend(value);
$("#to-dos").prepend(todoclose);
answered Jan 2 at 3:52
SuchipiSuchipi
384416
1
perfect worked.. thanks for the help
– Rainer Floeter
Jan 2 at 3:57
add a comment |
The bug is here:
todoclose + value + linebreak
todoclose is an Object, value is a string, and linebreak is a string. That means that in the first part of that code, you are adding an Object (todoclose) with a string (value).
When you add an Object to a string, the JavaScript engine calls the object's toString method to convert it to a string first, and then adds the result to the other string. The toString method on most objects prints [object Object] (which isn't very useful).
To fix it, instead of using + to add these together, you can prepend them one at a time (in reverse order):
$("#to-dos").prepend(linebreak);
$("#to-dos").prepend(value);
$("#to-dos").prepend(todoclose);
answered Jan 2 at 3:52
SuchipiSuchipi
384416
1
perfect worked.. thanks for the help
– Rainer Floeter
Jan 2 at 3:57
add a comment |
The bug is here:
todoclose + value + linebreak
todoclose is an Object, value is a string, and linebreak is a string. That means that in the first part of that code, you are adding an Object (todoclose) with a string (value).
When you add an Object to a string, the JavaScript engine calls the object's toString method to convert it to a string first, and then adds the result to the other string. The toString method on most objects prints [object Object] (which isn't very useful).
To fix it, instead of using + to add these together, you can prepend them one at a time (in reverse order):
$("#to-dos").prepend(linebreak);
$("#to-dos").prepend(value);
$("#to-dos").prepend(todoclose);
answered Jan 2 at 3:52
SuchipiSuchipi
384416
The bug is here:
todoclose + value + linebreak
todoclose is an Object, value is a string, and linebreak is a string. That means that in the first part of that code, you are adding an Object (todoclose) with a string (value).
When you add an Object to a string, the JavaScript engine calls the object's toString method to convert it to a string first, and then adds the result to the other string. The toString method on most objects prints [object Object] (which isn't very useful).
To fix it, instead of using + to add these together, you can prepend them one at a time (in reverse order):
$("#to-dos").prepend(linebreak);
$("#to-dos").prepend(value);
$("#to-dos").prepend(todoclose);
answered Jan 2 at 3:52
SuchipiSuchipi
384416
answered Jan 2 at 3:52
SuchipiSuchipi
384416
answered Jan 2 at 3:52
SuchipiSuchipi
384416
answered Jan 2 at 3:52
SuchipiSuchipi
384416
384416
1
perfect worked.. thanks for the help
– Rainer Floeter
Jan 2 at 3:57
add a comment |
1
perfect worked.. thanks for the help
– Rainer Floeter
Jan 2 at 3:57
1
1
perfect worked.. thanks for the help
– Rainer Floeter
Jan 2 at 3:57
perfect worked.. thanks for the help
– Rainer Floeter
Jan 2 at 3:57
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000938%2fi-am-getting-object-object-but-i-want-to-make-a-checkmark-button-prepended-to%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
