How to print return from Javascript into html

Question

I'm new to javascript. My chrome extension currently is not printing text into the little window once the button is clicked.

The first bit is the popup.js and the second is popup.html. My goal is force once you click the button, the area where it says filler is replaced with the text I have set in popup.js. I don't know javascript well and this is a lot of code that I have compiled from around. Thanks everyone!

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("click-this").addEventListener("click", handler;
});

// The handler also must go in a .js file
var date = new Date();
var dayOfWeek = date.getDay();
function handler() {
  if (dayOfWeek == 0){
      return  "sunday";
  }
  else   if (dayOfWeek == 1){
        return  "monday";
    }
  else if (dayOfWeek == 2){
        return  "tuesday";
    }
  else if (dayOfWeek == 3){
        return  "wednesday";
    }
  else if (dayOfWeek == 4){
        return  "thursday";
    }
    else if (dayOfWeek == 5){
          return  "friday";
      }
      else if (dayOfWeek == 6){
            return  "saturday";
        }
       
}

<head>
  <script src="popup.js"></script>
</head>
<div class="row">
    <div class="column large-6 medium-6 small-12">
        <h1> Lunch Menu </h1>
        <p> filler filler filler</p>
        <button type="button" id="click-this">Click</button>
    </div>
</div>

<style scoped>
  div {
    height: 100px;
    width: 500px;
  }
</style>

If this question is answered please mark the appropriate answer as "answered". Welcome to SO! — Ryan
– Ryan, Commented Jan 26, 2019 at 19:22

Amir Arbabian · Accepted Answer · 2019-01-26 18:19:23Z

2

It looks like you forgot to put closing brace before semicolon

document.getElementById("click-this").addEventListener("click", handler);

Hope that helps.

answered Jan 26, 2019 at 18:19

Amir Arbabian

3,7092 gold badges9 silver badges13 bronze badges

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

4 Comments

Joey Zhao Over a year ago

Thanks haha. Unfortunately nothing happened :(.

Amir Arbabian Over a year ago

@JoeyZhao What do you want to see exactly?

Amir Arbabian Over a year ago

@JoeyZhao to see something you need to change all these return "tuesday"; to window.alert("tuesday"); and you will see dialog box.

Joey Zhao Over a year ago

I want the filler text to be replaced with the text I choose, I put tuesday there right now but it will be changed later.

Toke Raabjerg · Accepted Answer · 2019-01-26 18:58:53Z

0

I suggest you use an editing program that has linter to check for any typing errors, it's really great when you're learning. My personal favorite is Atom, although it's a bit heavy on RAM.

answered Jan 26, 2019 at 18:58

Toke Raabjerg

568 bronze badges

2 Comments

Joey Zhao Over a year ago

I am using atom. It doesn't correct it for some reason though.

Toke Raabjerg Over a year ago

Did you add a javascript linter package?

Fire-In-D-Hole · Accepted Answer · 2019-01-26 20:26:30Z

-1

Added id for the paragraph to change the value as per the output.Let me know if it works!!

document.getElementById("click-this").addEventListener("click", function(){
var day;
switch (new Date().getDay()) 
{
case 0:
day = "Sunday";
break;
  case 1:
day = "Monday";
break;
  case 2:
day = "Tuesday";
break;
  case 3:
day = "Wednesday";
break;
  case 4:
day = "Thursday";
break;
  case 5:
day = "Friday";
break;
case  6:
  day = "Saturday";
}//end of switch case
document.getElementById("demo").innerHTML = day;
}//End of function
);

<head>
</head>
<div class="row">
    <div class="column large-6 medium-6 small-12">
        <h1> Lunch Menu </h1>
        <p id="demo"> filler filler filler</p>
        <button type="button" id="click-this">Click</button>
        </div>
    </div>

<style scoped>
div {
  height: 100px;
  width: 500px;

}
</style>

answered Jan 26, 2019 at 20:26

Fire-In-D-Hole

2702 silver badges13 bronze badges

1 Comment

Fire-In-D-Hole Over a year ago

@JoeyZhao Did my code work for your requirement or not?

Collectives™ on Stack Overflow

How to print return from Javascript into html

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related