Make a Button work in an Express.js app

Question

I am trying to add a button to a simple webapp, however i do not know how to make it work. I am using Node,express,ejs. I have two major issues:

What i want to make happen is that when i click the button,it should redirect me to a different page '/applist' which has a list of all my applications.
I am trying to add an image, which doesn't show and just alt text appears.Image is in the same folder as shown. Image size is 679x1178 pixels.

There is an auto-generated app.js which of course has all required modules included. The files below are ( index.js , style.css, index.ejs ) respectively.

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', {
    title: 'Welcome to AJ homepage'
  });
});

module.exports = router;

@import url(https://fonts.google.com/specimen/Fjalla+One?selection.family=Fjalla+One);
body {
  padding: 50px;
}

a {
  color: #00B7FF;
}

h1 {
  font-family: cursive;
  position: relative;
  font: ""
}

.btn {
  position: relative;
  bottom: 10px;
  top: 10px;
}

p {
  position: relative;
  top: 30px;
  font-size: 20px
}

<!DOCTYPE html>
<html>

<head>
  <title>
    <%= title %>
  </title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<div class="modal-body row">
  <div class="col-md-6">


    <body>
      <h1>
        <%= title %>
      </h1>
      <button class="btn" type="button">My Applications</button>
      <p>MY INFO </p>
    </body>

  </div>

  <div class="col-md-6">
    <img src="../public/images/arjun.jpg.jpg" alt="My Photo" class="img-responsive">
  </div>
</div>

</html>

If you just want the button to go to a different page, then use a link like this `Clickable content here` in your HTML and the browser will automatically go to a different page when the user clicks on that content. You can put a button inside that link if you want or almost any other HTML content. — jfriend00, Feb 27 '17 at 07:16

score 1 · Accepted Answer · edited Nov 15 '19 at 06:57

1

Try using an <a href="/my_applications"> instead of the <button>, you should still be able to style it as a button. Check this answer out: How to create an HTML button that acts like a link? , as it shows other options, like using a <form>. Also, in your express code you will need to define the route you want to serve.

edited Nov 15 '19 at 06:57

Gino Mempin

25,369
29
96
135

answered Feb 27 '17 at 06:59

Wylie Kulik

696
5
17

score 0 · Answer 2 · answered Feb 27 '17 at 06:56

0

I'm not sure why you need a button in this scenario. I suggest using an ordinary anchor link:

<a href="/applist" class="btn">My applications</a>

answered Feb 27 '17 at 06:56

jdlm

6,327
5
29
49

score 0 · Answer 3 · answered Feb 27 '17 at 07:08

0

<a href="/applist"> you can this anchor tag instead of button . this will be redirect to your applist page where you have define the route.

answered Feb 27 '17 at 07:08

Vikram Barnwal

47
5

Make a Button work in an Express.js app

3 Answers3