hi can someone help me with my code? it says the loginModule is not defined. can someone explain this to me. why can't define the function when i already call out on my html file?
and nothing reflects to the console but error.
pardon me because i'm a new learner of JavaScript. hope you help me thanks!
<!DOCTYPE html>
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Support Admin</title>
<!-- BOOTSTRAP CORE STYLE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME CSS -->
<link href="assets/css/font-awesome.min.css" rel="stylesheet" />
<!-- CUSTOM STYLE CSS -->
<link href="assets/css/style.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Nova+Flat' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css' />
<!-- <link rel="stylesheet" href="bootstrap.css" type="text/css"> -->
<script scr="support-admin\assets\data\admin-data.js"></script>
<script src="support-admin\assets\js\index-admin.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="head">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<a href="index.html">
<img src="assets/img/corelogo.png" class="header-mid" />
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 text-center" >
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h4><span>Call:</span> +639351957952</h4>
<h4><span>E-mail:</span> michaelpelagio9830#gmail.com</h4>
</div>
</div>
</div>
</div>
<section >
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<h3>Admin Login </h3>
<form>
<div class="form-group">
<input id="userName" type="text" class="form-control" required="required" placeholder="Username / Email" />
</div>
<div class="form-group">
<input id="passWord" type="text" class="form-control" required="required" placeholder="Your Password" />
</div>
<div class="form-group">
<i class="btn btn-success" onClick="logInModule()">Click To Login</button>
</div>
Forgot Password ?
</form>
</div>
</div>
</div>
</section>
<!-- Jquery Core Script -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Core Bootstrap Script -->
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
then this is my javascript index-admin.js
const logInModule = ()=>{
var username = document.getElementById('userName');
var password = document.getElementById('passWord');
console.log(username);
console.log(password);
}
whenever i click the button there's an error in console of my browser it says.
index-admin.html:80 Uncaught ReferenceError: logInModule is not defined
at HTMLElement.onclick (index-admin.html:80)
onclick # index-admin.html:80
Related
I need to copy the .container element without using innerHTML.
here the index.html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/test.css">
<!-- Utilitats CSS i icones Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="js/test.js"></script>
</head>
<body>
<div class="text-center">
<div class="card-header bg-info row">
<div class="col-sm-4">
<img src="https://pbs.twimg.com/profile_images/1046722856929947649/hytXqKH0_400x400.jpg" height="80">
</div>
<div class="col-sm-4">
<h3 class="display-4">Agenda IOC</h3>
<h4 class="text-warning">Consulta tots els esdeveniments</h4>
</div>
<div class="col-sm-4">
<h5 class="card-title">Elegeix la data:</h5>
<input id="data" type="date">
<button id="cerca">Cerca</button>
</div>
</div>
<div class="container">
<div class="card">
<div class="card_image-container">
<img class="card-image" src="http://agenda.cultura.gencat.cat/content/dam/agenda/articles/2018/07/03/033/Esculturas.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Title</h3>
<p>Description</p>
Go
</div>
</div>
</div>
</div>
<!-- Utilitats js de Bootstrap CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Copy the element and show it when click in the button.
I need to create a function that I can change the values of each element created.
I am currently learning window.onload and document.onload as attributes on html. But i fail to use them properly. In my code i want to focus a specific text area named "emri", using the document.onload but without success. Some would say to use it as a script or smth, but i want to use it as an attribute inside the tag. What am i doing wrong?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
</head>
<body onload="document.my-form1.emri.focus();" >
<main class="my-form">
<div class="container">
<div class="row justify-content-flex-start">
<div class="col-md-6">
<div class="card">
<div class="card-header">Apliko</div>
<div class="card-body">
<form name="my-form1" onsubmit=" return formValidation();">
<div class="form-group row">
<label for="emri" class="col-md-3 col-form-label text-md-right">Emri juaj:</label>
<div class="col-md-6">
<input type="text" class="form-control" name="emri">
</div>
</div>
Here your updated html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
</head>
<body onload="document.getElementById('emri').focus();">
<main class="my-form">
<div class="container">
<div class="row justify-content-flex-start">
<div class="col-md-6">
<div class="card">
<div class="card-header">Apliko</div>
<div class="card-body">
<form name="my-form1" onsubmit=" return formValidation();">
<div class="form-group row">
<label for="emri" class="col-md-3 col-form-label text-md-right">Emri
juaj:</label>
<div class="col-md-6">
<input type="text" class="form-control" name="emri" id="emri"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
You can just add the autofocus attribute to the input.
<input type="text" class="form-control" name="emri" autofocus>
There is nothing wrong how you use `window.onload´. It is the name of the form. Since there is a "-" character in the name, you should use it like this:
<body onload="document['my-form1'].elements.emri.focus();">
see: Example
You need to select like this
<body onload="document.getElementsByName('emri')[0].focus();">
If you are using HTML5, you can use like autofocus attribute in input.
This takes me days without sleep ... I can not visualize my glyphicons icons I am working under MVC 5 and Bootstrap 3 .... any help for me?
My View:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="col-md-6">
<div style="text-align:justify">
<h4><span class="glyphicon-tags"></span>ID Orden Compra: #TempData["IdOrden"]</h4>
<h4><span class="glyphicon-eye-open"></span>Proveedor: #TempData["NombreProveedor"]</h4>
<h4><span class="glyphicon-user"></span>Usuario: #TempData["NombreUsuario"] #TempData["ApellidoUsuario"]</h4>
<hr />
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type = "submit" value="Guardar Recepcion" class="btn btn-info">
</div>
</div>
</div>
}
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You need to have glyphicon as the base css class and then you add the css classes for the specific one (glyphicon-tags) as the second css class
This should work
<span class="glyphicon glyphicon-tags"></span>
I have the following html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datepicker - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<script src="../js/jquery.js"></script>
<script src="../_assets/js/index.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script>
$("#resultDate").datepicker( "setDate" , "7/11/2011" );
</script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="false">
<!-- /header -->
<div role="main" class="ui-content jqm-content">
<h2>Inline Datepicker</h2>
<div data-demo-html="true">
<input type="text" data-role="date" data-inline="true" disabled id="inputDate">
<input type="number" value="40" id="days">
<input type="text" data-role="date" data-inline="true" disabled id="resultDate" >
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
which is a demo from jquery mobile
I need to create a java script function that add a number of days to first textfield and displays the result in the last one.
It would be great if it will update the second picker value also.
It was working fine until a while ago. I did not change anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<header>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">11:00 AM</li>
<li role="presentation">4:00 PM</li>
<li role="presentation">9:00 PM</li>
</ul>
</header>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="elevenam">
<div class="row">
<?php include_once 'elevenam.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="fourpm">
<div class="row">
<?php include_once 'fourpm.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="ninepm">
<div class="row">
<?php include_once 'ninepm.php'; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
Is there something wrong with twitter bootstrap??
my js used to be link
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
from their site but it stopped working so i tried the downloaded one and it still doesn't work.
I notice in their demo, it wasn't working either.
because
`https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css%22%20integri ty=%22sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7`
is no more public. Upload a file on your server and load the css from there.