var app = angular.module("colorIt",[]);
app.controller("ColorCtrl",function() {
this.shape = '';
this.style = {
'border-color': '',
'background-color': '',
'border-width': '',
'border-style': ''
};
});
<!Doctype html>
<html data-ng-app="colorIt">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/app.css">
<link href="https://fonts.googleapis.com/css?family=Niconne|Quicksand:400,700" rel="stylesheet">
<title>Colorit</title>
</head>
<body>
<div id="user">
<h1>Colorit</h1>
<div id="inputs">
<label for="shapes">Shape</label>
<select class="shapes" name="shapes" ng-model="shape">
<option value="">Select Shape</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
</select>
<label for="background-color">Background Color</label>
<input type="color" name="background-color" ng-model="style['background-color']">
<label for="border-style">Border Style</label>
<input type="text" name="border-style" value="solid" ng-model="style['border-style']" placeholder="solid dashed dotted inset">
<label for="border-width">Border Width</label>
<input type="text" name="border-width" value="2px" ng-model="style['border-width']" placeholder="2px 4px 2px 4px">
<label for="border-color">Border Color</label>
<input type="color" name="border-color" ng-model="style['border-color']" ng-init="#000" value="#000000">
<label for="shadow">Box Shadow</label>
<input type="text" name="shadow" ng-model="shadow" value="5px 5px 10px" placeholder="5px 5px 10px">
<label for="shadow-color">Shadow Color</label>
<input type="color" ng-model=color name="shadow-color" value="#000">
</div>
</div>
<div id="display" ng-controller="ColorCtrl as color">
<div ng-class="{{color.shape}}" ng-style="{{color.style}}">
{{color.style['border-color']}},{{color.style['background-color']}},{{color.style['border-width']}}
</div>
</div>
<script src="assets/js/colorit.js" charset="utf-8"></script>
</body>
</html>
The controller is not storing values from the ng-model. Initially I had built this app using only directives, which was working, but then I had to set default values of various inputs, so I am using a controller.
Also, I am getting this error in my console
Error: [$parse:lexerr] http://errors.angularjs.org/1.6.0/$parse/lexerr?p0=Unexpected%20nextharacter%20&p1=s%200-0%20%5B%23%5D&p2=%23000
at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:6:425
at pc.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:221:149)
at pc.lex (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:218:369)
at r.ast (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:225:175)
at Cd.compile (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:235:100)
at qc.parse (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:260:332)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:131:115
at m.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:147:65)
at Object.pre (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:284:350)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:16:71
Move ng-controller="ColorCtrl as color" to the body tag and use controllerAs reference color in your bindings:
ng-model="color.style['border-width']
etc. for all ngModels.
Related
i cannot change language for my placeholder text. i can only change language for normal button text , head text but i cannot change language for placeholder text. please help to suggest anything i need to add on in my code. thanks
<!DOCTYPE html>
<html>
<head>
<title>Node.js app</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Style.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span language='myanmar' class="on">MYN</span>
<span language='english' class="off">ENG</span>
</div>
</label>
<div class="form-group">
<input type="text" class="form-control usrplaceholder" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control pwplaceholder" name="pw" placeholder="Password" required="required">
</div>
<script>
document.querySelector('#togBtn').addEventListener('input', (event) => {
document.querySelector('.usrplaceholder').textContent = data[event.currentTarget.checked ? 'myanmar' : 'english'].usrplaceholder;
document.querySelector('.pwplaceholder').textContent = data[event.currentTarget.checked ? 'myanmar' : 'english'].pwplaceholder;
});
var data = {
"english": {
"usrplaceholder": "Username",
"pwplaceholder": "Password"
},
"japanese": {
"usrplaceholder": "အသုံးပြုသူအမည်",
"pwplaceholder": "စကားဝှက်",
}
}
</script>
</body>
</html>
There's two problems in your code.
Firstly you're trying to access the myanmar property of the data object when it doesn't exist. The only properties, in the example code at least, as english and japanese.
Secondly, the input elements do not have a textContent property. From the context it looks like you're trying to set the placeholder property instead.
document.querySelector('#togBtn').addEventListener('input', (event) => {
document.querySelector('.usrplaceholder').placeholder = data[event.currentTarget.checked ? 'japanese' : 'english'].usrplaceholder;
document.querySelector('.pwplaceholder').placeholder = data[event.currentTarget.checked ? 'japanese' : 'english'].pwplaceholder;
});
var data = {
"english": {
"usrplaceholder": "Username",
"pwplaceholder": "Password"
},
"japanese": {
"usrplaceholder": "အသုံးပြုသူအမည်",
"pwplaceholder": "စကားဝှက်",
}
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span language='myanmar' class="on">MYN</span>
<span language='english' class="off">ENG</span>
</div>
</label>
<div class="form-group">
<input type="text" class="form-control usrplaceholder" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control pwplaceholder" name="pw" placeholder="Password" required="required">
</div>
I'm trying to make a dynamic drop down list using HTML and JavaScript, but every time I click on the drop down I get a new set of duplicate values. How can I prevent this from happening? I would prefer to stick to vanilla JS and html
function yearsArray(num) {
let years=document.getElementById("years")
let year=[...Array(num+1).keys()]
year.shift()
year.shift()
year.forEach(element => {
switch (element) {
case 1:
years.add(new Option(element,element,true))
break;
default:
years.add(new Option(element,element,false))
break;
}
})
}
body{
font-family: Arial, Helvetica, sans-serif;
}
h1{
color: gray;
}
<!DOCTYPE html>
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<title>Simple Interest Calculator</title>
<body>
<div class="maindiv">
<h1>Simple Interest Calculator</h1>
<form>
<label for="principal">Amount</label>
<input type="number" name="principal" id="principal"> <br/>
<label for="rate">Interest Rate</label>
<input type="range" id="rate" name="rate" min="0" max="20" step=".25">
<span id="rate_val">10.25%</span> <br/>
<label for="years">No. of Years </label>
<select id="years" name="years" onclick="yearsArray(20)">
<option selected value="1">1</option>
</select><br/>
<!-- Interest : <span id="result"></span><br/> -->
<button type="submit">Compute Interest</button>
</form>
</div>
</body>
</html>
Just run that function once on page load:
(You could of course just create the options using markup)
function yearsArray(num) {
let years = document.getElementById("years")
let year = [...Array(num + 1).keys()]
year.shift()
year.shift()
year.forEach(element => {
switch (element) {
case 1:
years.add(new Option(element, element, true))
break;
default:
years.add(new Option(element, element, false))
break;
}
})
}
yearsArray(20); //<---------- This runs the function on page load
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: gray;
}
<!DOCTYPE html>
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<title>Simple Interest Calculator</title>
<body>
<div class="maindiv">
<h1>Simple Interest Calculator</h1>
<form>
<label for="principal">Amount</label>
<input type="number" name="principal" id="principal"> <br/>
<label for="rate">Interest Rate</label>
<input type="range" id="rate" name="rate" min="0" max="20" step=".25">
<span id="rate_val">10.25%</span> <br/>
<label for="years">No. of Years </label>
<select id="years" name="years">
<option selected value="1">1</option>
</select><br/>
<!-- Interest : <span id="result"></span><br/> -->
<button type="submit">Compute Interest</button>
</form>
</div>
</body>
</html>
Figured it out. added the javascript function to the body tag
<body onload=yearsArray(20)></body>
Full Question: I want to log the value of each field (email address & select menu) to the console in the browser. I have made an attempt for this below but it does not seem to work. Any help would be much appreciated!
Code:
<!DOCTYPE html>
<html>
<head>
<title>Shopify Frontend Developer Intern</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>
<script>
function logOptions() {
var s = document.getElementsByName('Interests')[0];
var text = s.options[s.selectedIndex].text;
console.log(text);
}
function logEmail() {
console.log(document.getElementById('email').value);
}
function myFunction() {
logOptions();
logEmail();
}
</script>
<!-- <div class="input form"> -->
<form id="inputform" method="get" action="confirmation.html">
<input id="email" type="email" placeholder="Email Address" required>
<button type="submit" id="validate" onsubmit="myFunction()">Sign up now</button>
<select name="Interests" required>
<option value="" disabled selected>Interested in..</option>
<option value="option1">Marketing</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
</form>
<svg>
<rect width="40" height="3" style="fill:lightgreen" />
</svg>
</body>
</html>
I am trying to use Route in my newEvent page. But it's giving me 404 error. I checked my code but I am not able to identify the error.
can anyone please check my codes and let me know whats wrong im doing here. I uploaded app.js , EditEventController.js , index.html and NewEvent.html file. I also uploaded a screenshot. Please take a look and let me solve this error.
Thank you
'use strict';
var eventsApp = angular.module('eventsApp', ['ngResource', 'ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/newEvent', {
templateUrl: 'templates/NewEvent.html',
controller: 'EditEventController'
});
});
.factory('myCache', function ($cacheFactory) {
return $cacheFactory('myCache', {
capacity: 3
});
});
........................
'use strict';
eventsApp.controller('EditEventController',
function EditEventController($scope, eventData) {
$scope.saveEvent = function (event, newEventForm) {
if (newEventForm.$valid) {
eventData.save(event)
.$promise
.then(
function (response) {
console.log('success', response)
})
.catch(
function (response) {
console.log('failure', response)
}
);
}
};
$scope.cancelEdit = function () {
window.location = "/EventDetails.html";
};
}
);
........................
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore-1.4.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-resource.min.js"></script>
<script src="angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/EventController.js"></script>
<script src="js/controllers/EditEventController.js"></script>
<script src="js/services/EventData.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li> Create Event </li>
</ul>
</div>
</div>
<ng-view> </ng-view>
</div>
</body>
</html>
...................................
<div style="padding-left:20px; padding-right:20px">
<div class="container">
<h1> New Event</h1>
<hr />
<form name="newEventForm">
<fieldset>
<label for="eventName">Event Name: </label>
<input id="eventName" type="text" required ng-model='event.name' placeholder="Name of your event...." />
<label for="eventDate">Event Date: </label>
<input id="eventDate" type="text" required ng-pattern="/\d\d/\d\d/\d\d\d\d/" ng-model='event.date' placeholder="format (mm/dd/yyyy)...." />
<label for="eventTime">Event Time: </label>
<input id="eventTime" type="text" ng-model='event.time' placeholder="Start and end time...." />
<label for="eventLocation">Event Location: </label>
<input id="eventLocation" type="text" ng-model='event.location.address' placeholder="Address of event...." />
<br>
<input id="eventCity" type="text" ng-model='event.location.city' class="input-small" placeholder="City ...." />
<input id="eventProvince" type="text" ng-model='event.location.province' class="input-small" placeholder="Province ...." />
<label for="eventImageUrl">Image</label>
<input id="eventImageUrl" type="url" ng-model='event.imageUrl' class="input-xlarge" placeholder="Url of image ...." />
</fieldset>
<img ng-src="{{event.imageUrl}}" src="" />
<br>
<br>
<button type="submit" ng-disabled="newEventForm.$invalid" ng-click="saveEvent(event, newEventForm)" class="btn btn-primary">Save</button>
<button type="submit" ng-click="cancelEdit()" class="btn btn-primary">Cancel</button>
</form>
</div>
</div>
In your html, should this entry:
<script src="angular/angular-route.js"></script>
... be changed to this, so that it matches the location to the other angular files?
<script src="lib/angular/angular-route.js"></script>
I am trying to get the selected drop down printerType to alert user when the printer type value is not selected but only when the user selects request the printertype box shows up. The issue I have is that it doesn't alert the user that it is not filled. The others work fine. I hope this is understanding may be little confusing. the JavaScript code is at the bottom.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Systems Request</title>
<!--bootstrap-->
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="../Assets/javascript/html5shiv.min.js"></script>
<script src="../Assets/javascript/respond.min.js"></script>
<![endif]-->
<!--custom css-->
<link rel="stylesheet" type="text/css" media="all" href="Assets/css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="Assets/css/responsive.css">
<script src="Assets/Javascript/jquery-1.11.1.min.js" type=
"text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Assets/javascript/bootstrap.js"></script>
<script src="Assets/Javascript/textboxname_autocomplete.js" type=
"text/javascript"></script>
<style type="text/css">
.dropdown{
width: 292px;
height: 45px;
font-size: 16px;
margin-left: 30px;
margin-bottom: 10px;
background-color: pink;
}
</style>
</head>
<body style="background-image: url('../Systems/Assets/images/background.jpg')">
<?php include("includes/createHeader.php");?>
<section id="container">
<h2>Systems Request</h2>
<form name="systems" id="systems-form" action="Pages/InsertProcess.php" method="post"onsubmit="return formCheck(this);">
<div id="wrapping" class="clearfix">
<section id="aligned">
<label class="label">LanID</label><br><br>
<input type="text" name="lanId" id="lanId" autocomplete="off" tabindex="1" class="txtinput" >
<label class="label">Employee Name</label><br><br>
<input type="text" name="name" id="name" autocomplete="off" tabindex="1" class="txtinput">
<!--manager access db list info located in the includes folder-->
<label class="label">Manager</label><br><br>
<?php include("includes/accessDB_ManagerData.php");?>
<!--department dropdownlist located in the includes folder-->
<label class="label">Department</label><br><br>
<?php include("includes/departmentDropdownList.php");?>
<!--Request Issue list info located in the includes folder-->
<label class="label">Request Issue</label><br><br>
<!-- #start of Request Issues-->
*<select name ="request" id="request" onchange="if (this.selectedIndex==3){this.form['printerType'].style.visibility='visible'}else {this.form['printerType'].style.visibility='hidden'};">
<option value =""><?php echo ' Select Request Issue...'?></option>
<option value ="RESET CASE"><?php echo ' Reset Case'?></option>
<option value ="RESET WM PASSWORD"><?php echo " RESET WM PASSWORD"?></option>
<option value ="REPLACE TONER"><?php echo " REPLACE TONER"?></option>
<option value ="FIX PRINTER"><?php echo " FIX PRINTER"?></option>
<option value ="FIX DEVICES"><?php echo " FIX DEVICE"?></option>
<option value ="SAFETY HIGH REQUEST"><?php echo " SAFETY HIGH REQUEST"?></option>
<option value ="OTHER"><?php echo " OTHER"?></option>
</select><br>
<!-- #end of Request Issues-->*
***<select class="dropdown" style="visibility:hidden;" name="printerType" id="printerType" >
<option Value="">Please select Printer Type</option>
<option Value="FS 4200DN">Kyocera FS4200DN</option>
<option Value="FS 3040MFP">Kyocera FS3040MFP</option>
<option Value="Kyocera ">Kyocera FS1370DN </option>
<option Value="OKI MPS710C">OKI MPS710C</option>
<option Value="OKI MPS711C">OKI MPS711C</option>
<option Value="Sharp MX450N">Sharp MX450N</option>
</select>***
<br/>
<label class="label">Request Description </label><br><br>
<textarea name="request_comments" id="message" placeholder="Enter Description of Issue" tabindex="5" class="txtblock"></textarea>
<input type="submit" name="submit" id="submitbtn" class="btn btn-primary btn" tabindex="7" value="Submit">
<br style="clear:both;">
<?php #Hidden inputs for Status, tech comments, tech completed, tech completed date?>
<input name="status" type="hidden" value="RECEIVED">
<input name="comments" type="hidden" value="No Comment ">
<input name="compUser" type="hidden" value="Unassigned">
<input name="compDt" type="hidden" value="Not Completed">
</section>
</section>
</div>
</form>
</section>
<?php include("includes/footer.php");?>
<script src="Assets/Javascript/gen_validatorv4.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var frmvalidator = new Validator("systems");
if (document.getElementById('request').selectedIndex==3){
frmvalidator.addValidation("printerType","req","Please enter Printer Type");
}
else{
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
</script>
</body>
</html>
I had to change a few things like getElementbByName to getElementById. also added a function called updateValidation to add to the onchange part of the selected box and added frmvalidator.clearAllValidations();to the function along with added the two other textboxes lanId and request_comments to the if statement.
<select name ="request" id="request" onchange=" if (this.selectedIndex==3){this.form.printerType.style.visibility='visible'} else {this.form.printerType.style.visibility='hidden'};updateValidation()">
<script type="text/javascript">
function updateValidation (){
frmvalidator.clearAllValidations();
if (document.getElementById('request').selectedIndex==3){
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("printerType","req","Please enter Printer Type");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
else{
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
}
</script>