Develop Reference

Uncaught ReferenceError: boxChecked is not defined when it is?

I keep getting the above error an uncaught type error saying something isn't a function when I think it is. I'll post the code and point out where I am referencing the elements. I'm making a Todo list which generates a todo item, a checkbox, and a remove icon. When users click the checkbox, I want it to apply the text-decoration: line-through to the Todo item. I added an onclick="boxChecked"() to the input with the checkbox and referenced right away in my function. It keeps saying in my HTML that it isn't defined. Is this because it is all JavaScript being referenced to the HTML doc externally? Maybe I have the function in the wrong spot?
Here is the Console Log
function show() {
var todos = get_todos();
var html = "<ul>";
for (var i = 0; i < todos.length; i++) {
html +=
'<li class="todo-item">' +
'<span class="todo-label">' +
todos[i] +
"</span>" +
/*Here is the onclick--->*/ '<input onclick="boxChecked()" class="checkBox" type="checkbox">' +
'<button class="remove" id="' +
i +
'">' +
'<i class="fa fa-trash" aria-hidden="true"></i>' +
"</button>" +
"</li>";
}
html += "</ul>";
document.getElementById("todos").innerHTML = html;
var buttons = document.getElementsByClassName("remove");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", remove);
}
/*Here is the function for it---->*/ function boxChecked() {
var x = document.getElementByClassName("todo-item");
if (x.style.textDecoration === "none") {
x.style.textDecoration = "line-through";
} else {
x.style.textDecoration = "none";
}
}
}
document.getElementById("add").addEventListener("click", add);
show();
Below is an image from w3schools where I tried it all on one page (without referencing it through an external JavaScript file) and it works. I'm really not sure. Any help would be greatly appreciated!

How to display data below each other in javascript

Hi guys please direct me how to this I want my result appear below each other please refer to my code below:
function displayData(e)
{
var html = '';
var html2 = '';
$searchcontainer = $('#searchcontainer');
var mapDiv = document.getElementById('mapContainer'), i = 0,
dataIndex, tooltipDiv, key
mapMarkers = $(mapDiv).find('.e-mapMarker'), index = 0;
for (i = 0; i < mapMarkers.length; i++)
{
if (e.target.parentNode.parentNode == mapMarkers[i])
{
index = i;
}
}
html += '<div id="infocontainer">';
html += '<div class="p-image"><img src="src/images/retrofit.png"/></div>';
html += '<div class="popupdetail">';
html += '<div class="p-name"> Site Name: ' + flsSites[index].site_name + '</div>';
html += '<div class="p-name"> Site Status: ' + flsSites[index].status + '</div>';
html += '<div class="p-name"> Country: ' + flsSites[index].country_name + '</div>';
html += '</div>';
html += '</div>';
$searchcontainer = $('#searchcontainer');
if (!$(this).data('rightCont')) {
$(this).data('rightCont', $('<div class="rightcontainer">' +
'<img id="productimage" src="src/images/retrofit.png" onClick="DisplayProfileCard()"/>' +
'<div id="imagedetail">' +
'<span class="details">Product Type' + Sites[index].serial_number + '</span>' +
'<span class="details">Version / Size <img class="row_one_icon lightbulb_icon" id="lightbulb" src="src/images/lightbulb1.png" onClick="LightBulb()" /><img id="convert" class="row_one_icon arrow_icon" src="src/images/arrow_Off.png" onClick="Conversion()"/><img id="lightning" class="row_one_icon" src="src/images/lightningOff.png" onClick="Lightning()"/><img id="bullseye" class="row_one_icon bullseye" src="src/images/bullseye_off.png" onClick="BullsEye()"/></span>' +
'<span class="details">Estimated annual Spend <img class="row_one_icon ribbon" src="src/images/ribbon1.png"/><img class="row_one_icon map" src="src/images/map1.png"/><img class="row_one_icon paper_stack" id="paper" src="src/images/paper_stack_Off.png" onclick="PaperStack()"/><img class="row_one_icon chain" id="chain" src="src/images/chain_Off.png" onClick="ChainLink()"/></span>' +
'<span class="details">Site name / manufacturer</span>' +
'<span class="details">Selling Sales Eng</span>' +
'</div></div>').appendTo($searchcontainer));
}
$searchcontainer.find('.rightcontainer').removeClass('background');
$(this).data('rightCont').addClass('background');
now my code here works like this if I hover over a marker in the map it will display the result to my searchcontainer div but if I hover another item it will display the other result BUT it will overwrite the previous result instead of displaying it below
Many thanks in advance

Your call to $(this).data overwrites the contents of rightCont each time it is executed. Read more on the JQuery API. The .appendTo(...) call should be sufficient.
That being said, using string manipulation to create HTML code is stylistically terrible. Look at something like Vue.js, Handlebars, Angular, React, or just any other frontend MVC framework- they are tools designed for easily binding Javascript data to HTML, rather than manually inserting it using string manipulation.

How to change background-color with this element type?

I am getting via ajax from a JSON response from a Microsoft Recognition Services API. I receive and enter the received data correctly in the HTML.
But I would like to do the following:
He is going through the "Face" Array that contains the sex information of the person, the condition is as follows:
If it's a man, add background-color blue and if it's a woman add background-color pink, and it can come in information at the same time man and woman.
I can only add one color, I can not add more than one color at a time.
CODE 1:
var iconSexColor = document.getElementsByClassName('icon-sex-color');
function CheckSex__(objJSON){
for(fac in objJSON.faces){
console.log(objJSON.faces[fac].gender);
if(objJSON.faces[fac].gender === "Male"){
//console.log("M:");
InsertColorSex__("Male");
} else if(objJSON.faces[fac].gender === "Female"){
//console.log("F");
InsertColorSex__("Female");
} else{
// TODO
}
}
}
function InsertColorSex__(typeSex){
console.log("t:", typeSex);
if(typeSex === "Male"){
console.log("OI: M");
for(var count = 0; count < iconSexColor.length; count++){
iconSexColor[count].style.backgroundColor = "blue";
}
} else if(typeSex === "Female"){
console.log("OI: F");
for(var count = 0; count < iconSexColor.length; count++){
iconSexColor[count].style.backgroundColor = "pink";
}
} else{
// TODO
}
}
CODE 2:
.done(function(data){
// Transforma o JSON(DATA) Recebido em Objeto.
var objJSON = JSON.parse(JSON.stringify(data, null, 2));
console.log(objJSON);
GeneratePeoples__(objJSON);
GenerateCaptions__(objJSON);
GenerateCelebrities__(objJSON);
CheckSex__(objJSON);
})
function GenerateCelebrities__(objJSON){
for(cat in objJSON.categories){
for(cel in objJSON.categories[cat].detail.celebrities){
document.getElementById('celebrities-information').innerHTML +=
'<ul class="collapsible" data-collapsible="accordion">' +
'<li>' +
'<div class="collapsible-header"><i class="fa fa-id-card-o" aria-hidden="true"></i><strong>Celebrity ('+ cap++ +')</strong></div>' +
'<div class="collapsible-body white">' +
'<ul class="collection">' +
'<li class="collection-item avatar">' +
'<i class="icon-sex-color fa fa-star circle yellow-text" aria-hidden="true"></i>' +
'<span class="title title-collection-content-information">Celebrity Name</span>' +
'<p><strong>'+ objJSON.categories[cat].detail.celebrities[cel].name +'</strong></p>' +
'<a href="#!" class="secondary-content">' +
'<span class="new black badge" data-badge-caption=" "><strong>'+ objJSON.categories[cat].detail.celebrities[cel].confidence +" %" +'</strong></span>' +
'<span class="new black badge" data-badge-caption=" "><strong>Confidence</strong></span>' +
'</a>' +
'</li>' +
'</ul>' +
'</div>' +
'</li>' +
'</ul>';
}
}
InicializarCollapsible__();
};
INSERT COLOR HERE:
'<i class="fa fa-star circle yellow-text '+ InsertColorSex__() +'" aria-hidden="true"></i>' +

InsertColorSex__() is writting something in the css classes of the element so it could add a class that changes background-color css property.
Another thing is your CheckSex__(objJSON) function, that tries to loop over the results but return the firs occurence for the gender if Male or Female. But supposing it is working correctly, as you show in the console log, you could use that function to add pink or blue class to he element as you are passing objJSON to the function GenerateCelebrities__ building the HTML.
'<i class="fa fa-star circle yellow-text '+ CheckSex__(objJSON) +'" aria-hidden="true"></i>'
So after adding that you should declare the CSS rule in your CSS Stylesheet.
.pink { background-color: pink; }
.blue { background-color: blue; }

i still cant figure out your console but what you should do is before generating html you should add color property in in your category array object by checking gender. there should be some id or value that lets you to know that which face gender is of which category(i mean celeberaty)
for example
for(cat in objJSON.categories){
for(cel in objJSON.categories[cat].detail.celebrities){
for(fac in objJSON.faces){
if(objJSON.faces[fac].celebrity_id == objJSON.categories[cat].detail.celebrities[cel].celebrity_id){
if(objJSON.faces[fac].gender === "Male"){
objJSON.categories[cat].detail.celebrities[cel].color = "blue";
} else if(objJSON.faces[fac].gender === "Female") {
objJSON.categories[cat].detail.celebrities[cel].color = "pink";
} else {
objJSON.categories[cat].detail.celebrities[cel].color = "green";
}
}
}
}
}
Now you can print your color value in
'<i class="fa fa-star circle yellow-text" style="color:'+ objJSON.categories[cat].detail.celebrities[cel].color+'" aria-hidden="true"></i>' +
there may be some mistakes in referring object property in loop. Hope this gives you some ideas.

The solution is this:
function CheckSex__(objJSON) {
for (fac in objJSON.faces) {
if (objJSON.faces[fac].gender === "Male") {
$('#icon-sex-color'+ fac).css("background-color", "#1565c0");
} else if (objJSON.faces[fac].gender === "Female") {
$('#icon-sex-color'+ fac).css("background-color", "#e91e63");
} else {
// TODO
}
}
}

Javascript: Different background color for different div's

I have some troubles with javascript app to manage meetings. I have three levels of importance: 'Important', 'Medium', 'No important' and I want change background-color for them. 'Important' - red color, 'Medium' - yellow and 'No important'-green. I try to hold in content variable string from html and then compare this value with if,else if statement, but it still doesn't work. Do you have some advices?
main.js
function fetchMeetings(){
var meetings = JSON.parse(localStorage.getItem('meetings'));
var meetingsResults = document.getElementById('meetingsResults');
// Build output
meetingsResults.innerHTML = '';
for(var i = 0; i < meetings.length; i++){
var date = meetings[i].date;
var person = meetings[i].person;
var purpose = meetings[i].purpose;
var warning = meetings[i].warning;
meetingsResults.innerHTML += '<div class="mettingDiv">'+
'<h3>'+date+'</h3>'+
'<h3>'+person+'</h3>' +
'<h3>'+purpose+'</h3>'+
'<h3 class="importance">'+warning+'</h3>'+
' <a onclick="deleteMeeting(\''+purpose+'\')" class="btn btn-danger" href="#">Delete</a> ' +
'</div>';
}
var content= document.getElementsByClassName("importance").innerHTML;
if(content == 'Important'){
$('.mettingDiv').css('background-color', '#c00100');
}
else if(content == 'Medium'){
$('.mettingDiv').css('background-color', '#fbff30');
}
else if(content == 'No important'){
$('.mettingDiv').css('background-color', '#85ff63');
}
}
github
live app
Ok, I tried to add additional class name to div element, but class name is still the same, code:
meetingsResults.innerHTML += '<div id="div1" class="mettingDiv">'+
'<h3>'+date+'</h3>'+
'<h3>'+person+'</h3>' +
'<h3>'+purpose+'</h3>'+
'<h3 class="importance">'+warning+'</h3>'+
' <a onclick="deleteMeeting(\''+purpose+'\')" class="btn btn-danger" href="#">Delete</a> ' +
'</div>';
}
var content= document.getElementsByClassName("importance").innerHTML;
var d = document.getElementById("div1");
if(content == 'Important'){
d.className += " important";
}

Try this
meetingsResults.innerHTML += '<div class="mettingDiv ' + warning + '">'+ ...
this will result in <div class="mettingDiv Important"..., <div class="mettingDiv No important" ... and then add CSS
.Important { background-color: #c00100; }
.Medium { background-color: #fbff30; }
.No.important { background-color: #85ff63; }

add tag at specific div index

var element = document.getElementById("divname");
var pagerHtml ='&lt Prev';
for (var page = 1; page <= this.pages; page++){
pagerHtml += '<a href="#" class="'+ page>' + page + '</a> ';
}
pagerHtml += '<a class="dotline" style="display:none;">........</a>';
pagerHtml += ' Next >';
element.innerHTML = pagerHtml;
if(this.pages > 9){
for(var i=this.buffer;i<(this.pages-this.buffer);i++){
$("."+i+1)).hide();
}
}
I want to add class "dotline" so that when pages are hidden I would do $(".dash").show(); and it would look like 1,2,.....,8,9,10. any ideas would be appreciated.

Check this fiddle.
I've updated the script as shown below.
var pages = 10;
var buffer = 3;
var pagerHtml = ['&lt Prev'];
for (var page = 1; page <= pages; page++){
pagerHtml.push('' + page + ' ');
}
pagerHtml.push(' Next >');
$("#divname").append(pagerHtml.join(""));
if(pages > 9){
$("#divname a:gt(3):lt(" + (pages - 6) + ")").hide();
$('<a class="dotline" >........</a>').insertAfter($("#divname a:eq(3)"));
}

Can't edit post. However this is more what it should look like I think. Now what's the problem?
var element = document.getElementById("divname");
var pagerHtml ='&lt Prev';
for (var page = 1; page <= this.pages; page++){
pagerHtml += '<a href="#" class="'+ page> + page + '</a>';
}
pagerHtml += '<a class="dotline" style="display:none;">........</a>';
pagerHtml += ' Next >';
element.innerHTML = pagerHtml;
if(this.pages > 9){
for(var i=this.buffer;i<(this.pages-this.buffer);i++){
$("."+i+1).hide();
}
}
Unfinished product, however you can play with / tweak this.
I've rewritten your code cause it didn't work. Lots of errors in it.
Check it out: http://jsfiddle.net/tkwwZ/