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: 'Wele to AJ homepage'
});
});
module.exports = router;@import url(+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=".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>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: 'Wele to AJ homepage'
});
});
module.exports = router;@import url(https://fonts.google./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./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
<a href="http://someOther URL">Clickable content here</a>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 Commented Feb 27, 2017 at 7:16
3 Answers
Reset to default 1Try 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.
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>
<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.