Storing value from text field in object, Javascript

Question

I want to update my object with values from text fields.

I think the problem is with the click eventhandler on the button but not sure. I've tried a few things, Your help would be amazing.

HTML

<form>
    <label><p>Book Name: </p></label>
    <input name="booktitle" id="booktitle" type="text" value="I'm a value">
    <label><p>Total Pages: </p></label>
    <input type="text">
    <label><p>Current Page: </p></label>
    <input type="text">
    <button id="my-Btn" type="button">Add to List</button>
</form>

JS

(function() {
// Create book object

var book = {

    name: 'JavaScript & jQuery',
    totalPages: 622,
    pages: 162,
    pagesLeft: function() {
        var total = this.totalPages - this.pages;
        return total;
    },
    percentageLeft: function() {
        var totalPercentage = this.pagesLeft() / this.totalPages * 100
        return Math.round(totalPercentage);
    }
};

// write out book name and pages info

var bookName, totalPages, pagesLeft, percentageLeft; //declares variables

bookName = document.getElementById('bookName'); // gets elements from document
totalPages = document.getElementById('totalPages');
pagesLeft = document.getElementById('pagesLeft');
percentageLeft = document.getElementById('percentageLeft');

bookName.textContent = book.name; // write to document
totalPages.textContent = 'Total Pages: ' + book.totalPages;
pagesLeft.textContent = book.pagesLeft();
percentageLeft.textContent = book.percentageLeft() + '%';

// pull value from text field and set to object

document.getElementById("my-Btn").addEventListener("click", function() {
    book.name = document.getElementById('booktitle').value;
});

}());

Code Pen of what I have so far.

http://codepen.io/Middi/pen/pRGOVW

Thanks in advance.

comesuccingfuccslot · Accepted Answer · 2017-02-14 17:33:18Z

2

Your code already updates an object's property (book.name) with a value from a text field (#booktitle). You can see this by adding alert(book.name); after the line

book.name = document.getElementById('booktitle').value;

As Jazcash noted, if you wanted to display the updated book name everytime it was changed, you'd need to add

bookName.textContent = book.name;

In your eventlistener, so it'd look something like this:

document.getElementById("my-Btn").addEventListener("click", function() {
    book.name = document.getElementById('booktitle').value;
    bookName.textContent = book.name;
});

answered Feb 14, 2017 at 17:33

comesuccingfuccslot

7177 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Middi Over a year ago

Awesome man. Thank you. you saved me from pulling my hair out

Jazcash · Accepted Answer · 2017-02-14 17:31:06Z

1

The problem is you're setting your divs textContent based on book here: bookName.textContent = book.name;. But then you need to do it again in your event like so:

book.name = bookName.value;
bookName.textContent = book.name;

You'll need to do this for all your fields

answered Feb 14, 2017 at 17:31

Jazcash

3,3222 gold badges34 silver badges53 bronze badges

1 Comment

Middi Over a year ago

Legendary, Thank you so much

Collectives™ on Stack Overflow

Storing value from text field in object, Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related