Change innerHTML depending on input - javascript

I am iterating through a JSON-File and get a different amount of features for given locations. This can be 10 or there are only 2, depending on the location. I am able to retrieve the data from the JSON for each location and iterate through all of them at this spot.
GOAL: Depending on the number of features at the location I would like to create a table with max. 3 columns and number/3 rows. If there are e.g. 10 Features just make 3-3-3-1 (2 empty boxes).
var overlay = new ol.Overlay({
element: document.getElementById('overlay'),
positioning: 'bottom-left'
});
var displayImage = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature,layer){
features.push(feature);
},{hitTolerance: 10});
if (features.length >0) {
var rows = Math.ceil(features.length / 3);
var imag = [];
var years = [];
console.log(features);
for (var i = 0, ii = features.length; i < ii; ++i) {
imag.push(features[i].values_.pointAttributes.Image);
years.push(features[i].values_.pointAttributes.Year);
overlay.setPosition(features[i].values_.geometry.flatCoordinates);
var element = overlay.getElement();
console.log(imag);
element.innerHTML =
"<img ID=\"theImage\" src= \"\">\n\
<table class=\"fototable\"> \n\
<tr><td> <button class=\"btn\" data-img=" + imag[0] + " onclick=\"myFunction(this)\"> " + years[0] + " </button></td>\n\
<td> <button class=\"btn\" data-img=" + imag[1] + " onclick=\"myFunction(this)\"> " + years[1] + " </button> </td>\n\
<td> <button class=\"btn\" data-img=" + imag[2] + " onclick=\"myFunction(this)\"> " + years[2] + " </button> </td></tr> \n\
<tr><td> <button class=\"btn\" data-img=" + imag[3] + " onclick=\"myFunction(this)\"> " + years[3] + " </button></td> \n\
<td><button class=\"btn\" data-img=" + imag[4] + " onclick=\"myFunction(this)\"> " + years[4] + " </button></td>\n\
<td><button class=\"btn\" data-img=" + imag[5] + " onclick=\"myFunction(this)\"> " + years[5] + " </button> </td></tr></table>";
As you might see I hard-coded it so far but this is not the best solution. I tried to do something like adding the ...etc. to a string but I did not manage to get the 3-columns max then.
Any help/link will be appreciated!

Have fun :)
let test = [1,2,3,4,5,6,7,8,9,10,11];
let innerHTMLStart = "<table>";
let innerHTMLEnd = "</table>"
let innerHTML = innerHTMLStart;
let lastIndex = test.length - 1;
//loop over our items
for(var i = 0; i < test.length; i++) {
//first iteration
if(i % 3 == 0 && i == 0) {
innerHTML = innerHTML + "<tr>"
//modulo 3 but not first iteration
} else if(i % 3 == 0 && i > 0) {
innerHTML = innerHTML + "</tr><tr>"
}
//add cells to the table
innerHTML = innerHTML + "<td>" + test[i] + "</td>";
if(i == lastIndex) {
//last iteration? how many <td>?
//always finish with 3 cells
if((i+1) % 3 == 0) {
innerHTML = innerHTML + "</tr>"
} else if((i+1) % 2 == 0) {
innerHTML = innerHTML + "<td></td><td></td></tr>"
} else {
console.log("else")
innerHTML = innerHTML + "<td></td></tr>"
}
}
}
innerHTML = innerHTML + innerHTMLEnd;
console.log(innerHTML)

I didn't test that code and probably contains errors but as i understand your question the code below should be suits your needs.
var content ="<table class=\"fototable\"><tr>";
for(var t=0; t<imag.length; t++){
content+="<td><button class=\"btn\" data-img=\" + imag[t] + \" onclick=\"myFunction(this)\"> " + years[t] + " </button></td>\n\";
if((t+1)%3==0 && t!=(imag.length-1)){
content+="</tr><tr>";
}
}
for(var i = 0; i<3-imag.length%3; i++){
content+="<td></td>";
}
content+="</tr></table>";
element.innerHtml = content;

Related

After calling function I'm getting error saying undefined

In my table 1st column has a tags with href's and 3rd column has some text. So, I want to save all href's into an array where their respective 3rd column matches some string and use it for later purpose. I had tried the following code nothing seems wrong to me, can some one assist me with this.
function findimagelinks(){
var rows = jQuery(".sortable tr.even").length + jQuery(".sortable tr.odd").length;
var imglinks = [];
for (i=0; i<rows; i++){
var conditionvalue =jQuery(".sortable tr:eq(i+1) td:eq(3)").text();
if(conditionvalue == "some string"){
imglinks[i] = jQuery(".sortable tr:eq(i+1) td:eq(0) a").attr('href');
}
}
console.log(imglinks);
}
findimagelinks();
String concatenation is not right!
var conditionvalue = jQuery(".sortable tr:eq(" + (i + 1) + ") td:eq(3)").text();
// ------------------------------------------^
imglinks[i] = jQuery(".sortable tr:eq(" + (i + 1) + ") td:eq(0) a").attr('href');
// -----------------------------------^
Updated Snippet
function findimagelinks(){
var rows = jQuery(".sortable tr.even").length + jQuery(".sortable tr.odd").length;
var imglinks = [];
for (i = 0; i < rows; i++) {
var conditionvalue = jQuery(".sortable tr:eq(" + (i + 1) + ") td:eq(3)").text();
if (conditionvalue == "some string") {
imglinks[i] = jQuery(".sortable tr:eq(" + (i + 1) + ") td:eq(0) a").attr('href');
}
}
console.log(imglinks);
}
findimagelinks();
Your selector is wrong. Properly concatenate the strings like this
var conditionvalue = jQuery(".sortable tr:eq(" + (i + 1) + ") td:eq(3)").text();
Then your code will look like,
for (i = 0; i < rows; i++) {
var conditionvalue = jQuery(".sortable tr:eq(" + (i + 1) + ") td:eq(3)").text();
if (conditionvalue == "some string") {
imglinks[i] = jQuery(".sortable tr:eq(" + (i + 1) + ") td:eq(0) a").attr('href');
}
}

A number is converted to NaN after some clicked to show in console - Jquery

I'm making a paging on list of products. When i clicked on "Next" button and show in console value of "tranght" (My code only show value of "tranght") then type of "tranght" is converted to NaN. Help me, i'm newer in Jquery.
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.6.2.js"></script>
<script type="text/javascript">
var ds = [];
var tranght = 1;
var sobanghi = 0;
var sotrang = 0;
$(document).ready(function(){
$('#btnshow').click(function(){
$.ajax({
type : 'GET',
headers : {
Accept : "application/json; charset=utf-8",
"Content-Type" : "application/json; charset=utf-8"
},
url : '${pageContext.request.contextPath }/findall.html',
success : function(result) {
ds = result.dssp;
sobanghi = result.dssp.length;
if ((sobanghi % 3) === 0){
sotrang = Math.floor(sobanghi / 3);
} else {
sotrang = Math.floor(sobanghi / 3) + 1;
}
var s = "";
s = s + "<table border=\"1\"><tr class=\"title\"><td>Ma sp</td><td>Ten sp</td><td>Gia</td><td>So luong</td><td>Ngay sx</td><td>Tinh trang</td><td>Mo ta</td><td>Hinh anh</td><td>Danh muc</td></tr>";
for (var i=0; i<3; i++){
s = s + "<tr><td>" + result.dssp[i].masp + "</td><td>" + result.dssp[i].tensp + "</td><td>" + result.dssp[i].gia + "</td><td>"+ result.dssp[i].soluong +"</td><td>"+ result.dssp[i].ngaysx + "</td><td>"+ result.dssp[i].tinhtrang +"</td><td>"+ result.dssp[i].mota +"</td><td>"+ result.dssp[i].hinhanh +"</td><td>"+ result.dssp[i].danhmuc.tendm +"</td></tr>" ;
}
s = s + "</table>";
$('#result').html(s);
var s1 = "<div class='prev'>Prev</div>";
s1 += "<div class='index clicked'>" + 1 + "</div>";
for (var i=2; i<=sotrang; i++){
s1 += "<div class='index'>" + i + "</div>";
}
s1 += "<div class='next'>Next</div>";
$('#result1').html(s1);
}
});
});
//select a page
$(".index").live('click', function(){
$("#result1 > div").removeClass('clicked');
$(this).addClass('clicked');
tranght = parseInt($(this).html());
var startpoint = (tranght - 1)*3;
var endpoint = startpoint + 3;
sobanghi = ds.length
if (endpoint > sobanghi){
endpoint = sobanghi;
}
var s = "";
s = s + "<table border=\"1\"><tr class=\"title\"><td>Ma sp</td><td>Ten sp</td><td>Gia</td><td>So luong</td><td>Ngay sx</td><td>Tinh trang</td><td>Mo ta</td><td>Hinh anh</td><td>Danh muc</td></tr>";
for (var i=startpoint; i<endpoint; i++){
s = s + "<tr><td>" + ds[i].masp + "</td><td>" + ds[i].tensp + "</td><td>" + ds[i].gia + "</td><td>"+ ds[i].soluong +"</td><td>"+ ds[i].ngaysx + "</td><td>"+ ds[i].tinhtrang +"</td><td>"+ ds[i].mota +"</td><td>"+ ds[i].hinhanh +"</td><td>"+ ds[i].danhmuc.tendm +"</td></tr>" ;
}
s = s + "</table>";
$('#result').html(s);
});
// click "next" button
$(".next").live('click', function(){
console.log("value of tranght: " + tranght);
console.log("Type of: " + typeof tranght);
if (tranght === sotrang){
tranght = sotrang;
console.log("Type of: " + typeof tranght);
} else {
tranght = parseInt(tranght,6) + 1;
console.log("value: " + tranght);
console.log("Type of: " + typeof tranght);
}
});
});
</script>
We are missing some code, is the html object with the class 'index' an input? if so, you need to change
tranght = parseInt($(this).html());
to
tranght = parseInt($(this).val());
to capture the value and not the content.

Loop function not working for vowel counter. How can i make a counter text bold

My loop function for my vowels counter in not working correctly and I don't know where I have gone wrong I would like some assistance with it.
I am trying to get the most used vowel to be bold so say I have A = 34 and E = 45 so E should be bold like this E
But I don't know whether I am missing some code or if I have got something wrong in my code.
This is my JavaScript.
function countVowels() {
var text = document.getElementById("text").value;
var arrayOfLetters = text.split("");
// These are the counters for the program to find the vowels.
var countA = text.match(/[Aa]/g).length;
var countE = text.match(/[Ee]/g).length;
var countI = text.match(/[Ii]/g).length;
var countO = text.match(/[Oo]/g).length;
var countU = text.match(/[Uu]/g).length;
var countComma = text.match(/[,.!": ;?)(]/g).length;
var bold = "<strong>";
var vowels = new Array();
vowels[0] = "countA";
vowels[1] = "countE";
vowels[2] = "countI";
vowels[3] = "countO";
vowels[4] = "countU";
for (var i = 0; i < vowels.length; i++) {
document.getElementById("result").innerHTML = i + vowels[i] + "<br />";
}
// This code will output the results.
document.getElementById("result").innerHTML = "";
document.getElementById("result").innerHTML += "Total Letters: " + arrayOfLetters.length + "<br />";
document.getElementById("result").innerHTML += "A's: " + countA + "<br />";
document.getElementById("result").innerHTML += "E's: " + countE + "<br />";
document.getElementById("result").innerHTML += "I's: " + countI + "<br />";
document.getElementById("result").innerHTML += "O's: " + countO + "<br />";
document.getElementById("result").innerHTML += "U's: " + countU + "<br />";
document.getElementById("result").innerHTML += "Punctuation: " + countComma + "<br />";
}
This is my HTML.
<div style="text-align: center;">
<h1> Vowel Counter </h1>
Please enter text for your vowel count:
<br>
<textarea id="text" rows="10" style="width: 100%;"></textarea>
<br>
<button onclick="countVowels();">Count Vowels</button>
<p id="result"></p>
And this is my fiddle.
You seem to be getting the count right. So the only problems left I guess are:
Getting max count
Displaying it in bold
I referred to this to get max count, and then some tweaks to your code to get the max count displayed in bold.
var vowels = new Array ();
vowels [0] = {"vowel" : "A", "count" : countA};
vowels [1] = {"vowel" : "E", "count" : countE};
vowels [2] = {"vowel" : "I", "count" : countI};
vowels [3] = {"vowel" : "O", "count" : countO};
vowels [4] = {"vowel" : "U", "count" : countU};
var maxCount = Math.max.apply(Math, vowels.map(function(o) {
return o.count;
}));
for (var i = 0; i < vowels.length; i++) {
document.getElementById("result").innerHTML += (vowels[i].count == maxCount? "<B>" : "") + vowels[i].vowel + "'s: " + vowels[i].count + "<br />";
}
See this updated fiddle.
var result = "";
for(var i = 0; i < text.length ; i++){
if(text[i] == vowelsmustusedUpCase || text[i] == vowelsmustusedLowCase ){
result += "<strong>"+text[i]+"</strong>";
} else {
result += text[i];
}
}
document.getElementById("text").value = result ;
add this, but in textarea you can't see the bold
I think you should first find which is the most used vowel, and then compare it with the result line in your output. E.g.:
vowelCount = { A: countA, E: countE, I: countI, O:countO, U:countU };
// Find vowel with maximum appearances
var vowelMaxCount = -1;
var vowelMostPopular = -1;
for(vowel in vowelCount) {
if(vowelCount[vowel] > vowelMaxCount) {
vowelMaxCount = vowelCount[vowel];
vowelMostPopular = vowel;
}
}
// This code will output the results.
document.getElementById("result").innerHTML = "";
document.getElementById("result").innerHTML += "Total Letters: " + arrayOfLetters.length + "<br />";
for(vowel in vowelCount) {
v = (vowel == vowelMostPopular)?"<strong>"+vowel+"</strong>":vowel;
document.getElementById("result").innerHTML += v+"'s: " + vowelCount[vowel] + "<br />";
}
document.getElementById("result").innerHTML += "Punctuation: " + countComma + "<br />";
Demo fiddle: http://jsfiddle.net/lparcerisa/a8n947kw/1/
Ok here's a code review/answer:
First I modified these lines:
var countA = text.match(/[Aa]/g).length;
To:
var countA = (text.match(/[Aa]/g) ? text.match(/[Aa]/g).length : 0);
As it returns "Uncaught TypeError: Cannot read property 'length' of null" if the vowel doesn't appear in the control. This will set's it to 0.
Next I simplified the array declaration to:
var vowels = ["countA", "countE", "countI", "countO", "countU"];
Then I removed this seciton, which does nothing as it's overwritten later:
// does nothing
// for (var i = 0; i < vowels.length; i++) {
// document.getElementById("result").innerHTML = i + vowels[i] + "<br />";
// }
Then I worked out the highest count using Math.max:
var maxVal = Math.max(countA,countE,countI,countO,countU);
Then to make the value bold in the output, I created a function to compare values to the max value:
function formatValue(val, max) {
return (val === max) ? '<strong>' + val + '</strong>' : val;
}
So your final section would call this function to output the number like this:
document.getElementById("result").innerHTML += "A's: " + formatValue(countA,maxVal) + "<br />";
Demo JS Fiddle
Complete JS
function countVowels() {
var text = document.getElementById("text").value;
var arrayOfLetters = text.split("");
// These are the counters for the program to find the vowels.
var countA = (text.match(/[Aa]/g) ? text.match(/[Aa]/g).length : 0);
var countE = (text.match(/[Ee]/g) ? text.match(/[Ee]/g).length : 0);
var countI = (text.match(/[Ii]/g) ? text.match(/[Ii]/g).length : 0);
var countO = (text.match(/[Oo]/g) ? text.match(/[Oo]/g).length : 0);
var countU = (text.match(/[Uu]/g) ? text.match(/[Uu]/g).length : 0);
var countComma = (text.match(/[,.!": ;?)(]/gi) ? text.match(/[,.!": ;?)(]/gi).length : 0);
var bold = "<strong>";
var vowels = ["countA", "countE", "countI", "countO", "countU"];
var maxVal = Math.max(countA,countE,countI,countO,countU);
// This code will output the results.
document.getElementById("result").innerHTML = "";
document.getElementById("result").innerHTML += "Total Letters: " + arrayOfLetters.length + "<br />";
document.getElementById("result").innerHTML += "A's: " + formatValue(countA,maxVal) + "<br />";
document.getElementById("result").innerHTML += "E's: " + formatValue(countE,maxVal) + "<br />";
document.getElementById("result").innerHTML += "I's: " + formatValue(countI,maxVal) + "<br />";
document.getElementById("result").innerHTML += "O's: " + formatValue(countO,maxVal) + "<br />";
document.getElementById("result").innerHTML += "U's: " + formatValue(countU,maxVal) + "<br />";
document.getElementById("result").innerHTML += "Punctuation: " + countComma + "<br />";
}
function formatValue(val, max) {
return (val === max) ? '<strong>' + val + '</strong>' : val;
}

Compare month in nested object array

The following problem is causing me some headache. I'm building an application to compare transaction data with a list of tenants and what they're supposed to pay for rent.
I've got it running nicely except it compares EACH transaction with the monthly rent. What I want to do is first add all (relevant) transaction amounts per month and then compare them.
Should I just build another nested for-loop to compare all the transaction months before I run this loop? I could potentially drop in years of transaction data making it quite inefficient...
Any tips are greatly appreciated.
var table = "<table><thead><tr><th>Rek</th><th>Name</th><th>Date</th><th>Amount</th><th>Rent</th><th>Diff</th></tr></thead><tbody>";
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < tenant.length; j++) {
if (tenant[j].reks.indexOf(data[i].rek) == -1)
continue;
else {
var diff = tenant[j].rent - data[i].amount; //TODO monthly!!!
var style = " style='background-color: ";
if (diff > 0)
style += "red;'";
else
style += "green;'";
table += "<tr><td>" + data[i].rek
+ "</td><td>" + data[i].name
+ "</td><td>" + (data[i].date.getMonth() + 1) + "-" + data[i].date.getFullYear()
+ "</td><td>€ " + data[i].amount
+ "</td><td>€ " + tenant[j].rent
+ "</td><td" + style
+ ">" + diff
+ "</td></tr>";
}
}
}
table += "</tbody></table>";
$('#top').html(table);

need to refresh to show local storage values in javascript

I'm trying to get the values stored in the local storage variables in order to display them !!
but the problem here is that the display of the values is immediate, in other words :
the first time of loading the page nothing is displayed then every time i refresh the page the next value is displayed.
function ChoixDeQuestion (){
var ide=window.sessionStorage.getItem('idenq');
GetQuest(10);//--> this function store some values in the 'questions' var
var storedQuest=JSON.parse(window.localStorage['questions']);
var i;
for ( i = 0; i < storedQuest.length; i++)
{
var newdiv = document.createElement('div');
switch(storedQuest[i].type) {
case 'text':
newdiv.innerHTML += "<br> Question " + (i + 1) + " : "+storedQuest[i].text+" ? <br><br><textarea name='quest"+(i + 1)+"' rows=4 cols=40 >type here...</textarea>" ;
break;
case 'simple':
var questId=storedQuest[i].id;
GetChoix(questId);
var storedChoix=JSON.parse(window.localStorage['choices'+questId]);
newdiv.innerHTML += "<br> Question " + (i + 1) + " : "+storedQuest[i].text+" ? <br><br>";
for (var j = 0; j < storedChoix.length; j++) {
newdiv.innerHTML += " " + (j + 1) +"- "+storedChoix[j].text+ " <input type='radio' name='choix"+(j + 1)+"'>";
}
break;
case 'multiple':
var questId=storedQuest[i].id;
GetChoix(questId);
var storedChoix=JSON.parse(window.localStorage['choices'+questId]);
newdiv.innerHTML += "<br> Question " + (i + 1) + " : "+storedQuest[i].text+" ? <br><br>";
for (var j = 0; j < storedChoix.length; j++) {
newdiv.innerHTML += " " + (j + 1) +"- "+storedChoix[j].text+ " <input type='checkbox' name='choix"+(j + 1)+"'>";
}
break;
document.getElementById('results').appendChild(newdiv);
}
}
thie method is called in the
$(document).ready(function() { ChoixDeQuestion();});
So how can I get all the values shown in the same time when the page is loaded ??

Categories