CODEWITHSUNDEEP
javascriptvariablesif-statementtextareagetelementbyid
Grooms
Grooms

Reputation: 25

Unable to create a variable in javascript

I am creating an app that will tell you the price of a product when the barcode is scanned. Basically, when a barcode is scanned, it goes into the text field, and then based on which barcode it is, the textarea will have a price put into it via javascript. I've gotten this to work, but I can't seem to create a certain variable to save me from looking through tons of code later on.

Here is my javascript:

function showPrice() {
    var userInput = document.getElementById('barcode').value;
    var price = document.getElementById('textarea').innerHTML;
    if (userInput === "783466209834") {
        price = "16.99";
    } else {
        price = "Not a valid barcode";
    }
}

And here is my HTML:

<input type="text" name="text" class="textinput" id="barcode">
<input type="button" onclick="showPrice()" value="Submit">
<textarea name="" cols="" rows="" readonly="readonly" id="textarea"></textarea>

Right now, my code isn't working, but if I remove

var price = document.getElementById('textarea').innerHTML;

and replace "price" in the if statement respectively, then it works. I'm not sure why I can't create this price variable.

Upvotes: 2

Views: 143

Answers (5)

Steve
Steve

Reputation: 8640

You are getting the innerHTML of the textarea and storing it in the variable price. Instead, you need to only store the element in the variable and then call price.innerHTML to place your result in the DOM. Like such:

function showPrice() {
    var userInput = document.getElementById('barcode').value;
    var price = document.getElementById('textarea');
    if (userInput === "783466209834") {
        price.innerHTML = "16.99";
    } else {
        price.innerHTML = "Not a valid barcode";
    }
}

EDIT: As talemyn correctly points out, you should use .value rather than .innerHTML for altering the contents of textareas. While it might look like it does the same thing, there are slight disadvantages that come with the use of .innerHTML.

Upvotes: 3

SeanCannon
SeanCannon

Reputation: 78006

Because you're storing the value of the innerHTML as the variable, not storing a reference to it.

Change it to var textarea = document.getElementById('textarea'); and then textarea.innerHTML = "16.99" and so on.

Upvotes: 3

FunnyOxymoron
FunnyOxymoron

Reputation: 615

You're setting the 'price' variable twice with two separate things. You're not actually changing the DOM. Instead use:

var price = document.getElementById('textarea');
if (userInput === "783466209834") {
    price.innerHTML = "16.99";
} else {
    price.innerHTML = "Not a valid barcode";
}

Upvotes: -2

talemyn
talemyn

Reputation: 7960

If you want to work with the value of the textarea, you need to access document.getElementById('textarea').value, not innerHTML.

And, yes, as others have pointed out, you want to set the variable to reference to the element, not the value. Then you can retrieve or set the value of the element.

Upvotes: 3

Floris
Floris

Reputation: 46435

You should not assign a value to price and then overwrite it... That's what your code is doing. I believe you think you are creating a storage location in the innerHTML?

Instead, just create the variable:

var price;

Run your code as you did; and then put the result into the page with

document.getElementById("text area").innerHTML = price;

Upvotes: -1

Related Questions