How to use a JavaScript variable in HTML file?

Question

I want to print the value that the variable quantity holds in HTML

Here's my JavaScript code

class Ingredient {
  constructor (name, dateBought, expiryDate, quantity, expired){
    this.name = name;
    this.dateBought = dateBought;
    this.expiryDate = expiryDate;
    this.quantity = quantity;
    this.expired = false;
  }
  isExpired(){
    this.expired = true;
  }
  needReorder(){
    console.log(this. name + "need to be reordered")
  }
}

let cabbage = ("cabbage", new Date(2003,3,2), 23)

I'm trying to display the quantity in an HTML file like this, so far nothing prints

<script src="inventory.js"> 
  
  var quantity = cabbage.quantity
  
</script>
<script>
    document.write(quantity)
</script>

I know that there isn't anything wrong with my HTML because this code works perfectly fine

<script>
   document.write("write something")
</script>

Thank you in advance :)

You can not have external source and inline script in the same tag. — epascarello
– epascarello, Commented Oct 27, 2020 at 3:41

topdev87 · Accepted Answer · 2020-10-27 03:35:52Z

1

You should use the variable cabbage.quantity in another script, not in the importing script.

<script src="inventory.js">   
</script>

<script>
    var quantity = cabbage.quantity
    document.write(quantity)
</script>

Missing the new Ingredient with 4th argument.

let cabbage = new Ingredient("cabbage", new Date(2003,3,2), 23, 50)

edited Oct 27, 2020 at 3:35

answered Oct 27, 2020 at 3:20

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

7 Comments

Ruijie Lu Over a year ago

Can you explain? I tried document.getElementById("demo").innerHTML = quantity; Is this correct?

topdev87 Over a year ago

correct. since script is already imported in html file, you can use the variable as you want like that.

topdev87 Over a year ago

just the important notice is that variable should be used not in the first script (importing script), but in another script.

Ruijie Lu Over a year ago

Thank you it worked. Why is the 4th argument needed? I want to have expired defaulted as false, really confused

topdev87 Over a year ago

if you don't define the 4th argument, it will be undefined.

|

Heri Hehe Setiawan · Accepted Answer · 2020-10-27 03:27:18Z

1

You need to access the Ingredient class correctly. In your class declaration, quantity is expected to be the 4th argument, so you should pass that as follows:

new Ingredient("cabbage", new Date(2003,3,2), 23, 10)

Complete code:

class Ingredient {
  constructor (name, dateBought, expiryDate, quantity, expired){
    this.name = name;
    this.dateBought = dateBought;
    this.expiryDate = expiryDate;
    this.quantity = quantity;
    this.expired = false;
  }
  isExpired(){
    this.expired = true;
  }
  needReorder(){
    console.log(this. name + "need to be reordered")
  }
}

let cabbage = new Ingredient("cabbage", new Date(2003,3,2), 23, 10)
document.write(cabbage.quantity)

edited Oct 27, 2020 at 3:27

answered Oct 27, 2020 at 3:23

Heri Hehe Setiawan

1,6332 gold badges15 silver badges21 bronze badges

2 Comments

Ruijie Lu Over a year ago

I can't see the difference

Heri Hehe Setiawan Over a year ago

@RuijieLu If you notice carefully, there are differences there, it accesses the class by passing the quantity as the 4th argument.

Collectives™ on Stack Overflow

How to use a JavaScript variable in HTML file?

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related