Javascript beginner - rgb

I'm trying to make it so that the rgb values entered change the background colour. I have already written the html part.
html:
Red Value<input name="red" type="text">
Green Value<input name="green" type="text">
Blue Value<input name="blue" type="text">
<input name="submit" type="button" value="Submit" onclick="changeBackground();
For the javascript I know it would start with
function changeBackground(){

Try this (see code comments for explanation):
function changeBackground() {
// get values of all input boxes
// getElementsByTagName returns array, you need just first element
var red = document.getElementsByName('red')[0].value;
var green = document.getElementsByName('green')[0].value;
var blue = document.getElementsByName('blue')[0].value;
// create css rgb color value (e.g. rgb(255, 255, 255))
var color = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
// set background color of body
document.body.style.backgroundColor = color;
}
To make it work with background color of text area you need to change just last line. It could look like:
document.getElementById('id_of_my_textarea').style.backgroundColor = color;

Here is a JS fiddle of it working.
Uses
document.forms.RGB.elements
and
document.forms.RGB.style.backgroundColor
https://jsfiddle.net/xy12aten/
intentionally left the code wet so it's easier to read.

This should help get you going
HTML
<form name="RGB">
<p>Red Value<input name="red" value="0" min="0" max="255" required type="number"></p>
<p>Green Value<input name="green" value="0" min="0" max="255" required type="number"></p>
<p>Blue Value<input name="blue" value="0" min="0" max="255" required type="number"></p>
<input name="submit" type="submit" value="Submit">
</form>
JS
var form = document.forms.RGB,
elem = form.elements;
form.onsubmit = function(event){
event.preventDefault()
var red = elem.red.value,
green = elem.green.value,
blue = elem.blue.value;
alert("The color = ("+red+","+green+","+blue+")");
return true;
}
example: https://jsfiddle.net/z3hzt8kf/

Related

Show input file name in DOM using AngularJS

I am trying to show the input file name in a readonly text box.
As can be seen this is different from the custom input file of HTML.
So, I tried this.
<input type="text" readonly ng-model="name">.
<input style="display: none" id="upload" type="file" accept=".csv" onchange="angular.element(this).scope().fileNameChange(this)">
<button type="button" ng-click="clickUpload()">Browse</button>
$scope.fileNameChange = function(e) {
$scope.name=e.files[0].name
}
$scope.clickUpload = function(){
angular.element('#upload').trigger('click');
};
With this logic, say I first select 'inputFile1.csv', nothing is shown in the textbox.
Then I select another file 'inputFile2.csv', now 'inputFile1.csv' is shown in textbox.
Where am I going wrong? Also, is this the best way to implement this functionality?
Try this:
<input type="text" readonly ng-model="name">.
<input style="display: none" id="upload" type="file" accept=".csv" onchange="angular.element(this).scope().fileNameChange(this)">
<button type="button" ng-click="clickUpload()">Browse</button>
$scope.fileNameChange = function(e) {
// let the DOM process before letting angular do its thing
$timeout(function() {
$scope.name=e.files[0].name
});
}
$scope.clickUpload = function(){
angular.element('#upload').trigger('click');
};

Handling multiple radio buttons

Here "idDefault" values are not changing. Please help me.
<div class="form-group" >
<label class="control-label">Select Colors : </label>
<div ng-repeat = "color in colorlist">
<input type="radio" name="color" ng-value="true" ng-model="color.idDefault">
{{color.colorName}} </input>
</div>
Colors : {{colorlist}}
and my JSON is
$scope.colorlist = [
{
colorName:'Black',
idDefault:true},
{
colorName:'Red',
idDefault:false} ,
{
colorName:'Bule',
idDefault:false} ,
{
colorName:'Yellow',
idDefault:false} ,
];
Initially black is selected. When selecting other colors, Black isDefault value not changing to false.
First of all as you are using color list for radio buttons , its the way for Checkbox list . But if you wanna use it like this only , you can do it by adding a ng-change in it like -
View Code-
<div class="form-group" >
<label class="control-label">Select Colors : </label>
<div ng-repeat = "color in colorlist">
<input type="radio" name="color" ng-change="changed(color)" ng- value="true" ng-model="color.idDefault"/>
{{color.colorName}}
</div>
Colors : {{colorlist}}
and in controller add a method -
$scope.changed=function(color){
for(var i=0;i<$scope.colorlist.length;i++)
if($scope.colorlist[i].colorName!==color.colorName){
$scope.colorlist[i].idDefault=false;
}
}
Check the fiddle
hope it will work for you.
The method that you are trying to use above is used for checkboxes where you can select multiple value but here you want only one color to be selected at time.
You can this as,
<div class="form-group" >
<label class="control-label">Select Colors : </label>
<div ng-repeat = "color in colorlist">
<input type="radio" name="color" ng-value="color" ng-model="selectedColor">
{{color.colorName}}
</input>
</div>
This way you can get the selected color in your contoller in $scope.selectedColor variable.

Call the first <span> in a scrollbar when press enter using angularjs

I have a text box which is using for search.When enter the characters it searches the values and shows one by one in a scrollbar. When i click on any found value it redirects to the related page but when press enter it should call first value in that scrollbar.Below is my code.
<div><input type="text" value="" placeholder="search" ng-model="searchText" name="testName" ng-keyup="search()"></div>
<div class="scroll" ng-show="searchText.length" ng-hide="!searchText.length">
<div ng-repeat="relatedData in data">
<span ng-click="showDetails(relatedData)" ng-model="searchText">{{ relatedData }} </span><br />
</div>
</div>
and below is my script code:
$scope.showDetails = function(relatedData) {
$http.get("searchInfo.json").success(function(response) {
var searchT = relatedData;
$http.get(searchT+'Details.json').success(function(response) {
$scope.details = response;
$scope.searchText = "";
});
});
}
Could you please help to call first value in multiple values scrollbar,Thanks.
One way would be to wrap your search field in a form element:
<form ng-submit="showDetails(data[0])">
<input type="text"
value=""
placeholder="search"
ng-model="searchText"
name="testName"
ng-keyup="search()">
</form>
ng-submit will catch the form submit event triggered by pressing Enter.

Radio Buttons ng-checked with ng-model

In my HTML page, I have two sets of Boolean based radio buttons: Labeled: "Yes" and "No" / Values: True and False respectively. I'm populating a full form from a PostgreSQL database table to allow the authenticated user to view the form with populated data and edit the populated fields including the radio buttons, then save the form which will save the data to the DB. All of the other text fields populate without issue; it's both collection of radio buttons I am having an issue with pre-checkmarking the radio buttons.
The below does not pre-populate the checked on front end (but adds the correct attribute of checked in HTML source):
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" value="FALSE" ng-checked="person.billing == 'false'" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" value="TRUE" ng-checked="person.billing == 'true'" />
However, this does check the correct radio button on load:
<input id="billing-no" type="radio" name="billing" value="FALSE" ng-checked="person.billing == 'false'" />
<input id="billing-yes" type="radio" name="billing" value="TRUE" ng-checked="person.billing == 'true'" />
Note: I needed to check against the string boolean value in the directive ng-checked since the boolean value always comes back as a string from PostgreSQL. This, apparently, was a part of PostgreSQL's design when querying data from columns that have boolean data types.
When adding the ng-model directive, the radio button no longer is checked (at least in the rendered browser view). The odd part is that I looked at the source and it clearly checks the correct one. What's even more odd, is that I have to click on the radio button twice to 'check' it. I've tested this in latest version of Chrome, FF, and IE and it all results in the same issue.
The question is: when adding the ng-model directive, why would the HTML source add 'checked' in the radio button attribute, but seemingly does not mark the radio button? Furthermore, why would I have to click twice on the radio button that IS supposed to be checked?
Solution:
To fix this, I removed the ng-checked directive from the radio buttons and only used ng-model as suggested by #Cypher and #aet. I then replaced the attribute value with the directive ng-value "true" & "false". After, I set the values in the controller.
HTML
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="false" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="true" />
Angular JS
app.controller('peopleCtrl', function($scope, peopleFactory){
...
peopleFactory.getPerson(personParams).then(function(data){
$scope.person = data;
/* moved from ng-checked */
$scope.person.billing = data.billing == 'true';
});
...
};
I think you should only use ng-model and should work well for you, here is the link to the official documentation of angular https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
The code from the example should not be difficult to adapt to your specific situation:
<script>
function Ctrl($scope) {
$scope.color = 'blue';
$scope.specialValue = {
"id": "12345",
"value": "green"
};
}
</script>
<form name="myForm" ng-controller="Ctrl">
<input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/>
<tt>color = {{color | json}}</tt><br/>
</form>
I solved my problem simply using ng-init for default selection instead of ng-checked
<div ng-init="person.billing=FALSE"></div>
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="FALSE" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="TRUE" />
[Personal Option]
Avoiding using $scope, based on John Papa Angular Style Guide
so my idea is take advantage of the current model:
(function(){
'use strict';
var app = angular.module('way', [])
app.controller('Decision', Decision);
Decision.$inject = [];
function Decision(){
var vm = this;
vm.checkItOut = _register;
function _register(newOption){
console.log('should I stay or should I go');
console.log(newOption);
}
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="way">
<div ng-controller="Decision as vm">
<form name="myCheckboxTest" ng-submit="vm.checkItOut(decision)">
<label class="radio-inline">
<input type="radio" name="option" ng-model="decision.myWay"
ng-value="false" ng-checked="!decision.myWay"> Should I stay?
</label>
<label class="radio-inline">
<input type="radio" name="option" ng-value="true"
ng-model="decision.myWay" > Should I go?
</label>
</form>
</div>
</div>
I hope I could help ;)
Please explain why same ng-model is used? And what value is passed through ng- model and how it is passed? To be more specific, if I use console.log(color) what would be the output?

How to know which of the radio buttons is selected in angularjs

I have 2 radio buttons like this, and 2 text boxes that should be enabled based on the choice on the radio buttons.
<input type="radio" name="type" ng-model="outputType" value="1"> Choice1 <br/>
<input type="radio" name="type" ng-model="outputType" value="2"> Choice2 <br/>
<td><input type="text" ng-model="name" value="name" ng-disabled="istypeSelected('1') " size="5"> Name <br/></td>
<td><input type="text" ng-model="date" value="date" ng-disabled="istypeSelected('2')" size="5"> date <br/></td>
and here is a button
<button class="btn" type="button" style="" ng-click="update()">update</button>
I want to run some sql query in the back end when user hit the button. But I need to know which of the radio buttons has been chosen also. How can I access it?
In your controller, you should simply be able to access $scope.outputType and that will take the value of the radio button (i.e. 1 or 2) and assign it to whatever variable you wish to assign it to.
i.e.
var myChoice = $scope.outputType;
http://docs.angularjs.org/api/ng/input/input%5Bradio%5D
EDIT
Hard to say what's up, because I couldn't see your controller. The following displays just fine in the console for me:
var myapp = angular.module('myapp',[]);
myapp.controller('FormCtrl', ['$scope',
function($scope) {
$scope.update = function() {
var myChoice = $scope.outputType;
console.log(myChoice);
};
}]);
And, you also need to assign which controller to your form element:
form ng-controller='FormCtrl'

Resources