We Keep Coding

How to change button background color by name using Javascript

I have several buttons on my webpage and want to style the background colors when I click on them according to the button's name. I want all the "Toms" to be lightgray, all the "Dicks" to be lightgreen, and all the rest ("Harrys") to be lightyellow. I added the following code to my external Javascript page, but it's not working:
function bgColor() {
var x = document.getElementsByTagName("button").name;
if (x == "Tom") {
document.getElementsByTagName("button").style.backgroundColor=
"lightgray";
} else if (x == "Dick") {
document.getElementsByTagName("button").style.backgroundColor=
"lightgreen";
} else {
document.getElementsByTagName("button").style.backgroundColor=
"lightyellow";
}
}
The HTML reads something like this but between less than/greater than symbols, of course:
button type="button" name="Tom" onclick="bgColor()"
button type="button" name="Dick" onclick="bgColor()"
button type="button" name="Harry" onclick="bgColor()"
EDITED TO ADD
I can't figure out how to reply to Mikkel's comment directly. I tried simply posting another comment, but it wouldn't let me add code. Anyway, I tried the fix that he suggested using the following but it didn't work for me either.
function bgColor() {
var tom = document.querySelector('button[name="Tom"]')
.style.backgroundColor = 'lightgray';
var dick = document.querySelector('button[name="Dick"]')
.style.backgroundColor = 'lightgreen';
var harry = document.querySelector('button[name="Harry"]')
.style.backgroundColor = 'lightyellow';
}
What am I doing wrong?

As #Mikkel has said, your selector is wrong - You'll want to use an attribute selector to get the elements that match your name attribute
However, in this specfic case as well you've got a more weird issue - You'll have to change the name of your function - bgColor is also the name of a property on the elements which I believe is causes your further issues. - You can read more about that here
If you change the name to something like changeColors you shouldn't have this issue
As an aside, there's no need to assign your querySelectors to a variable, you can just run them in this case
function changeColors() {
document.querySelector('button[name="Tom"]').style.backgroundColor = 'lightgray';
document.querySelector('button[name="Dick"]').style.backgroundColor = 'lightgreen';
document.querySelector('button[name="Harry"]').style.backgroundColor = 'lightyellow';
}
<button type="button" name="Tom" onclick="changeColors()"> X </button>
<button type="button" name="Dick" onclick="changeColors()"> X </button>
<button type="button" name="Harry" onclick="changeColors()"> X </button>

document.getElementsByTaName("button") is getting all your buttons. What you want to do, is check each of the buttons individually and apply the color.
You can do it with the code below, that'll change the color of "Tom". You can repeat it to make it work for your other buttons.
function bgColor() {
var tom = document.querySelector('button[name="Tom"]').style.backgroundColor = 'purple'
}

First, using bgColor as a user-defined function name will throw a type error since it's a reserve keyword for JS (Object's property) though deprecated.
Second -> var x = document.getElementsByTagName("button").name; will obviously throw an error x is undefined because this syntax without '.name' should return all buttons on the page in an array, with that you can loop through and access properties of individual button eg. name
So we use this instead var x = document.getElementsByTagName("button") which returns an array of buttons on the page.
That being said, let's see how we can modify your code to achieve what you're looking for:
HTML:
<button type="button" name="Tom" onclick="buttonBgColor(event)"> Tom</button>
<button type="button" name="Dick" onclick="buttonBgColor(event)"> DicK </button>
<button type="button" name="Harry" onclick="buttonBgColor(event)"> Harry </button>
JS:
function buttonBgColor(e) {
const buttons = document.getElementsByTagName("button").name;
for(button of buttons){
const current_button = e.target;
if(current_button.name == 'Tom'){
current_button.style.backgroundColor = 'lightgray'
}else if(current_button.name == 'Dick'){
current_button.style.backgroundColor = 'lightgreen'
}else if(current_button.name == 'Harry'){
current_button.style.backgroundColor = 'lightyellow'
}
}
}
This method is useful because assuming you have two buttons with same name say 'Tom' and yet you want one of them to do something extra aside changing their background colors, you can reference their ID to achieve that using e.target.id or current_button.id in a condition to wire up another handler for that particular 'Tom' button.
Hope this helps.

inputting grades (javascript function)

How do I make it so that the numbers I input are all on top of one another and another together in one spacing.
It supposed to show all the 3 grades I have input and when the button is clicked it should show the average and either pass or fail (I know it's supposed to be an if else statement but I really can't comprehend the codes and where will I put it)
If someone helps me solve this one can someone give me more user input / function related exercises that I can work on? thanks.
var p = prompt ("enter first grade");
var c = prompt ("enter second");
var o = prompt ("enter third grade");
document.write (p);
document.write (c);
document.write (o);
function xxx (p,c,o)
{
document.getElementById("demo4").innerHTML = ((parseInt(p)+parseInt(c)+parseInt(o)) / 3)
}
<p id="demo"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<button onclick="xxx()">calculate</button>
<p id="demo4"></p>
<p id="demo5"></p>

Let me start first with the main non-logic problems with your code:
You shouldn't use prompt, it's just bad user experience. Dynamically create HTML elements instead.
You shouldn't use document.write. You aren't able to specify where the text should go and it makes your code vulnerable towards XSS vulnerabilities.
You shouldn't use onclick. You should never mix the JS with your HTML like that. (React's HTML-like syntax is not HTML, it's JSX. It's okay to do that there.)
Now, back to the main logic which your code should follow.
Provide the user with one <input type='number'> field and an "Add" button.
Recalculate the result on every change, don't rely on a "Calculate" button to update your state.
You can use an if statement to detect a failing grade.
Here is an example of a more proper implementation of what you're trying to accomplish. I know I'm basically doing the homework task for you so I would like you to learn from this.
// Storing references to elements.
const grades = document.getElementById('grades');
const template = document.getElementById('template');
const addButton = document.getElementById('add');
const averageOut = document.getElementById('average');
const failedOut = document.getElementById('failed');
function recalculate() {
// Let's create a sum variable.
let sum = 0;
// Let's query the document for grade input fields.
const numberFields = document.querySelectorAll('#grades input');
// Iterate over number fields with for ... of.
for (let field of numberFields) {
// Unary + converts the value into a number.
// parseInt can be used instead as well.
sum += +field.value;
}
// .length gives you the total amount of input fields.
// .length works on any array and some lists. (querySelectorAll returns a NodeList instead of an array)
const average = sum/numberFields.length;
// Use innerText to prevent XSS.
averageOut.innerText = average;
// If statement to check if the person has failed.
if (average < 3.0) {
failedOut.innerText = 'FAIL';
} else {
failedOut.innerText = 'NOT FAIL';
}
}
// Let's recalculate the average on any change made in ANY field in the document.
// This is basically what jQuery does in its '.on(eventType, selector, listener)' method.
// This technique relies on event bubbling.
// Make sure to replace this once you start adding more functions into the document.
// Also, () => is a closure in JavaScript, which is a function but with a different context.
document.addEventListener('change', () => recalculate());
// Adding new fields.
addButton.addEventListener('click', () => {
// Clone the template...
const templateClone = template.cloneNode(true);
// ...and append it to our grades.
grades.appendChild(templateClone);
// Also recalculate.
recalculate();
});
// Recalculate on load.
recalculate();
<ul id="grades">
<li id="template">
<input type="number" value="1" min="1" max="5" />
</li>
</ul>
<button id="add">Add</button>
<div>
<span>Average:</span> <span id="average"></span>
</div>
<div>
<span>Failed?:</span> <span id="failed"></span>
</div>
What you could improve upon is adding a "Remove" button.

Variable Id Called in JS Function

I've spent the past couple hours googling and browsing W3Schools and couldn't find a way to do exactly what I wanted. I've found similar articles but they don't answer my question perfectly.
So what I'm trying to do is this, create a JS function that when called in HTML will take the information given to return the appropriate information. E.G, I want there to be two HTML buttons. If the user presses the first button, it calls the function "onclick='show(x, y)'" and x and y which stand for another paragraph and an image. If the user presses the second button, it calls the same function with different variables "onclick='show(x, z)'" which would display the same paragraph as the other button would but would display a different image.
Basically, is it possible for HTML elements to have IDs that can be variable in JS so I that I do not have to create an individual JS function for every single button?
My Javascript:
<script>
var Show = function(elID, elID2) {
var el1 = document.getElementByID(elID);
var el2 = document.getElementByID(elID2);
var both = (elID) + " " + (elID2);
document.getElementById(elID).innerHTML = both;
}
</script>
My HTML:
<p id="demo">
<button onclick="Show(77, demo)">Click to convert</button>
</p>
I am still learning the ins and outs of Javascript so any and all help would be appreciated.

yes, enclose the arguments in quotes
<button onclick="Show('77', 'demo')">Click to convert</button>
without quotes 77 will be passed correctly but demo will not be since it will look for a demo property in window scope.

You should get innerHTML before inserting. Also note that, you must pass id attributes wrapped in quotes(').
ID attributes should at least have one character and it should not start with NUMBER
function Show(elID, elID2) {
var el1 = document.getElementByID(elID).innerHTML;
var el2 = document.getElementByID(elID2).innerHTML;
var both = (elID) + " " + (elID2);
document.getElementById(elID).innerHTML = both;
}
<p id="demo">
<button onclick="Show('77', 'demo')">Click to convert</button>
</p>

You could lay aside the inline JavaScript and opt for a different way, separating your markup from your logic.
https://jsfiddle.net/tricon/p2esv818/
HTML:
<button id="button" data-parameter-one='{ "keyOne": "valueOne", "keyTwo": "valueTwo" }'>
Some button
</button>
JavaScript:
var button = document.getElementById("button");
button.addEventListener("click", function() {
var parameters = this.getAttribute("data-parameter-one");
parameters = JSON.parse(parameters);
console.log(parameters);
});

Is there a way to use this.onClick event and still be able to use "this" in function it calls?

project with these needs.
(10 points) When a button is clicked, the appropriate points are added to the total score.
(10 points) You are Not allowed to make any change to the HTML code provided above. In other words, you need to write unobtrusive JavaScript code, attaching event handlers in JavaScript rather than in HTML.
(10 points) The window.onload event handler should be an anonymous function.
(10 points) You should use the same event handler to handle the onclick event occurred on all of the four buttons on the webpage. In other words, you need to avoid code redundancy by using the this keyword.
I would like if someone could tell me a way I can use "this" in both of my functions so it doesn't have to be repetative like it is now in the first function, something like what I commented out. Or a way to simplify the code so it works as it does now.
<script>
window.onload = pageLoad();
function pageLoad() {
//this.onclick = okClick;
document.getElementById("6pt").onclick = okClick;
document.getElementById("3pt").onclick = okClick;
document.getElementById("2pt").onclick = okClick;
document.getElementById("1pt").onclick = okClick;
}
function okClick() {
var num1 = document.getElementById("score").value;
num1 = parseInt(num1);
var num2 = num1 + parseInt(this.id[0]);
document.getElementById("score").value = num2;
}
</script>
<body>
<div>
<input id="score" type="text" value="0" />
</div>
<div>
<button id="6pt">6 points (touchdown)</button>
<button id="3pt">3 points (field goal)</button>
<button id="2pt">2 points (safety/2-point conversion)</button>
<button id="1pt">1 point (extra point)</button>
</div>
</body>

Why don't you give all those elements a class, and then use
var myLinks = document.querySelectorAll('.myClass');
for(var i=0;i<myLinks.length;i++)
myLinks[i].onclick = okClick;
Inside okClick, the clicked element will be available via this (and also event.target).

Event handlers, like onclick are called in the context of the target object, thus you can safely use this within any event handler function. This also applies to jQuery attached events.
The above is valid for the 'okClick' function. You asked about "both of my functions", so if you're referring to pageLoad, that function is not executed in the context of an object, so you can't use this. But why would you need it? It won't help you much.

You can use the bind function which will give a given context to your function:
var context = window;
context.something = 5;
var myFunc = function () {
console.log(this.something); //5
}.bind(context);

If all you want to do is attach the same okClick() to each button then you should try and use a more general selector than ID. You can only have one ID per element so, like you've noticed, you must individually hook into each one.
Instead, try a more general selector, like document.getElementsByClassName("className");, which would be a bit more general:
<body>
<div>
<input id="score" type="text" value="0" />
</div>
<div>
<button id="6pt" class="score-button">6 points (touchdown)</button>
<button id="3pt" class="score-button">3 points (field goal)</button>
<button id="2pt" class="score-button">2 points (safety/2-point conversion)</button>
<button id="1pt" class="score-button">1 point (extra point)</button>
</div>
<script>
(function(){
// Same as yours
function okClick() { ... }
var buttons = document.getElementsByClassName("score-button");
for(var i = 0, len = buttons.length; i < len; i++)
{
buttons[i].onClick = okClick;
}
}).call(this);
</script>
</body>
There's fancier selectors available in either jQuery or more modern javascript implementations which will save you having to use a class selector, you'll have to read into that though - or see Sidd's answer, which is doing exactly that (it's cleaner).

How to implement JavaScript abstractly

I'm looking to build a simple ranking system, where divs are generated dynamically, so there could be a couple or a few hundred, and each div can be ranked up or down. I have it working for 1, but I'm not sure how I can do it on a larger scale where each div has a unique id.
HTML
<button class="up">Up</button>
<button class="down">Dowm</button>
<div id="rank">Rank = 0</div>
JavaScript
var rank = 0;
var rankPercent = 0;
var rankTotal = 0;
$('.up').click(function(){
rank++;
rankTotal++;
rankPercent = rank/rankTotal;
$('#rank').text("Rank = "+ rankPercent);
});
$('.down').click(function(){
rankTotal++;
rankPercent = rank/rankTotal;
$('#rank').text("Rank = "+ rankPercent);
});

The easiest way to do this within JQuery is to have class="rank" on that rank div also. Then since you get sender in click button handler (you just need to change signature to $('.up').click(function(eventObject){ ... })) you can search for next element that has .rank class.
That all being said, I STRONGLY recommend you abandon this approach (since it's really error prone) and instead of building components yourself, invest time in learning something like AngularJs.
Take a look at this question if you want to look into AngularJS - How to master AngularJS?
EDIT: Thanks for the downvote... I was busy with making example in JsFiddle:
http://jsfiddle.net/7zrej/

One of many ways would be to leverage data attributes to keep your rank data on your elements themselves. You can generate unique IDs for each div when you generate them, and put those in data attributes for your buttons too.
Your HTML with initial data attributes might look like this:
<button class="up" data-id="0">Up</button>
<button class="down" data-id="0">Down</button>
<div id="rank-0" data-rank="0">0</div>
<button class="up" data-id="1">Up</button>
<button class="down" data-id="1">Down</button>
<div id="rank-1" data-rank="0">0</div>
<button class="up" data-id="2">Up</button>
<button class="down" data-id="2">Down</button>
<div id="rank-2" data-rank="0">0</div>
And your JavaScript like this:
$(".up").click(function() {
var id = $(this).data("id");
var rank = $("#rank-" + id).data("rank");
rank++;
$("#rank-" + id).data("rank", rank).text(rank);
});
$(".down").click(function() {
var id = $(this).data("id");
var rank = $("#rank-" + id).data("rank");
rank--;
$("#rank-" + id).data("rank", rank).text(rank);
});
Live example

Think of it a little differently. Create an upshift() and downshift() function, where the node swaps rank with whatever's above or below it (or do nothing if there's nothing below it).
So,
function upshift (node) {
var nodeAbove = getNodeAbove(node);
if (nodeAbove) swapRanks(node, nodeAbove);
return node;
}
function downshift (node) {
var nodeBelow = getNodeBelow(node);
if (nodeBelow) swapRanks(node, nodeBelow);
return node;
}
As a side thing, perhaps consider doing this with a more Object Oriented approach:
var ranks = [];
function Node (node_id) {
var node = this;
ranks.push(node);
node.rank = ranks.length-1;
}
Node.prototype.upshift = function upshift () {};
Node.prototype.downshift = function upshift () {};
var n1 = new Node(),
n2 = new Node(),
n3 = new Node();

I'm writing up a longer answer but it would be helpful if you could describe in more detail exactly what sort of behavior you're trying to create.
Are you expecting that the div's reorder themselves when ranks change so that they are always in order of highest ranked to lowest ranked?
Question lacks detail.
EDIT: http://codepen.io/shawkdsn/pen/lojwb/
This example shows a dynamic list of elements with adjustable ranks that maintains the order from highest approval rating to lowest.
EDIT2: I should add that this codepen example is purely front-end code (incomplete solution) and any real ranking system would require integration with a back-end layer. Angular is a good option to explore and is relatively easy to pick up.