I have a script for a sliding testimonial block, you can see it on https://www.medprodisposal.com.
The problem is the name for the testimonial is giving an undefined error vs. showing the customers name.
Here is the HTML:
<div id="container">
<h2><span>Testimonials</span></h2>
<div id="comment"></div>
</div>
<div id="test"></div>
And here is the script;
//create and fill the array
var commt = [ ];
var name = [ ];
var i = 0;
commt[0] = '<blockquote class="quote"><p>0';
commt[1] = '<blockquote class="quote"><p>1';
commt[2] = '<blockquote class="quote"><p>2';
commt[3] = '<blockquote class="quote"><p>3';
name[0] = 'Lindsey P. / Champaign, IL.</p>';
name[1] = 'Dr. San Jose / Hayward, California';
name[2] = 'Thomas H. / Palos Heights, Illinois';
name[3] = 'Mary Beth / Niceville, FL';
//shows how many comments there are
var maxComments = 4;
//get empty elements
var comment = document.getElementById('comment');
//this section will create the inital comment shown
//creates a random number
var number = Math.floor(Math.random() * 4);
//adds the HTML to div
window.onload = comment.innerHTML = "<p>" + commt[number] + "</p>" +
"<h3 class='commentSliderH3'>" + name[number] + "</h3>";
//This rotates the comments
setInterval(function () { //same content as above
var number = Math.floor(Math.random() * maxComments);
comment.innerHTML = "<p>" + commt[number] + "</p>" +
"<h3 class='commentSliderH3'>" + name[number] + "</h3>";
}, 9031); // Runs the function every 9031ms
The undefined error shows for the name. It shows correctly in IE, but not on Chrome or FF.
You have to avoid the reserved word for Javascript like name, change the variable to for example names and it works.
JSFiddle
Related
I am trying to get indVars to repeat for the amount of times that numInd requires. So if numInd = 3 then I'm wanting something similar to this indVars[0] = divStart + userEntryVars + divEnd -- indVars[1] = divStart + userEntryVars + divEnd ... and so on for however many numInd dictates --- Then the arrays get posted to innerHTML.
/*User Selection Of Indicators*/
var numInd = 3 /*This is amount of indicators that should show in innerHTML.*/
/*User Entry Variables Per Selection*/
var uHeight = 120
var uWidth = 225
/*Html Variables*/
var divStart = '<div class="col-sm-auto">'
var userEntryVars = '<img src="whatever.jpg" style="height:' + uHeight +'px; width: '+ uWidth + 'px">'
var divEnd = '</div>'
/*Div InnerHTML*/
var divArea = document.getElementById("IndicatorArea") ;
var out = []
var indVars = [divStart + userEntryVars + divEnd] ;
/*Loop For Number Of Indicators*/
for (i = 0; i < numInd; i++){
out.push(indVars[i])
};
console.log(out[0]) /*Returns Data I Expect*/
console.log(out[1]) /*Returns Data I Don't Expect, It Should Be Showing Same as out[0]*/
divArea.InnerHTML = indVars
So the user selects the amount of indicators that should show (indicators = boxes), then they can type in the variables that go into the innerHTML...so if they select 2, the user has to fill in 2 of the user entries for each variable because the indicators will show different data. I have tried a few variations of arrays and I have gotten close but sometimes I'm getting "undefined" and then the div counts. I'm thinking the HTML Variables should be in a for loop to loop for the number of indicators but I'm not sure. Ultimately, the number of selected indicators should be 3 different entities, and within these 3 different entities can be variable data posted by the user. Thank you in advance.
for indVars, right now you're adding together divStart + userEntryVars + divEnd.
If you want indVars[0] = divStart and indVars[1] = userEntryVars, declare it like
var indVars = [divStart, userEntryVars, divEnd]
I was able to resolve this by the following code.
/*User Selection Of Indicators*/
var numInd = 3 /*This is amount of indicators that should show in innerHTML.*/
/*User Entry Variables Per Selection*/
var uHeight = 120
var uWidth = 225
/*Html Variables*/
var divStart = '<div class="col-sm-auto">'
var userEntryVars = '<img src="whatever.jpg" style="height:' + uHeight +'px; width: '+ uWidth + 'px">'
var divEnd = '</div>'
/*Div InnerHTML*/
var divArea = document.getElementById("IndicatorArea") ;
var out = []
var indVars = divStart + userEntryVars + divEnd ;
/*Loop For Number Of Indicators*/
for (i = 0; i < numInd; i++){
out.push(indVars)
};
divArea.InnerHTML = out.join("")
Any help would be appreciate. I need to create a slider based on JSON datas from the moviedb API. I created the slider showing the title, the picture and the description within a for loop but the last thing I need to achieve is to get the movie rating but instead of the number I need to show stars (half or full filled according to the datas provided).
I'm stuck and tried different things but it doesn't work. I know it's quite simple but I'm stuck.
Many thanks for any help. Do not hesitate if you need something else because it's my first post on stackoverflow.
Here is the fiddle of my work :
https://jsfiddle.net/y2hbzej8/7/
Here is my JS code to get datas :
JS :
var urlmoviedb = 'https://api.themoviedb.org/3/movie/upcoming?api_key=e082a5c50ed38ae74299db1d0eb822fe';
$(function() {
$.getJSON(urlmoviedb, function (data) {
console.log(data);
for (var x = 0; x < data.results.length; x++) {
var title = data.results[x].original_title;
var descr = data.results[x].overview;
var note = data.results[x].vote_average;
var noteround = Math.round(2 * note) / 2;
var str = "/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg";
var imageurl = str.replace("/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg", "https://image.tmdb.org/t/p/w1280");
var image = imageurl + data.results[x].backdrop_path;
$('#image').append('<li>' + '<h2 class="h2-like mt-4">' + title + '</h2>' + '<p class="note">' + noteround + '</p>' + "<img class='img-fluid mb-4' src='" + image + "'>" + '<p class="descr">' + descr + '</p>' + '</li>');
}
});
Divide the vote_average field of each row by two since values go from 0 to 10. This will give you five stars based values.
I edited your example, I added font-awesome CSS library that will give you lots and lots of icons you can play with. Check them out
Here's the edited example on JSFiddle
var urlmoviedb = 'https://api.themoviedb.org/3/movie/upcoming?api_key=e082a5c50ed38ae74299db1d0eb822fe';
$(function() {
$.getJSON(urlmoviedb, function(data) {
console.log(data);
for (var x = 0; x < data.results.length; x++) {
var title = data.results[x].original_title;
var descr = data.results[x].overview;
var note = data.results[x].vote_average;
var noteround = Math.round(2 * note) / 2;
var str = "/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg";
var imageurl = str.replace("/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg", "https://image.tmdb.org/t/p/w1280");
var image = imageurl + data.results[x].backdrop_path;
//Translate vote average field into number of stars by dividing them by two since vote_average goes from 0 to 10
var numberOfStars = Math.round(note/2);
var stars = '';
for(var index = 0; index < numberOfStars; index++)
stars += '<span class="fa fa-star"/>';
$('#image').append('<li>' + '<h2 class="h2-like mt-4">' + title + '</h2>' + "<img class='img-fluid mb-4' src='" + image + "'>" + '<p class="descr">' + descr + '</p>' + stars + '</li>');
}
});
});
So I'm trying to insert one div into another both created with Javascript
I have the following code,
// Assign tool attributes to Javascript Variables
var tool_name = String(tool['tool_name']);
tool_name = tool_name.replace(/'/g, '');
var tool_inventory_number = String(tool['tool_inventory_number']);
tool_inventory_number = tool_inventory_number.replace(/'/g, '');
var tool_recnum = String(tool['tool_recnum']);
tool_recnum = tool_recnum.replace(/'/g, '');
// Create the divs for the search results
var toolDiv = document.createElement("div");
var toolDivPicture = document.createElement("div");
//todo: Insert picture into this toolDivPicture div
var toolDivDescription = document.createElement("div");
toolDivDescription = toolDivDescription.innerHTML + "<h2>" + tool_name + "</h3>" + " <br>" + "Inventory Number: " + tool_inventory_number;
// Assign class to search result toolDiv and add content to it.
toolDiv.className = "toolDiv";
toolDiv.appendChild(toolDivDescription);
I keep getting the following error,
Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.
Could this be because I have to refrence the child div by id? I really just want to have javascript create a div that contains two other divs and then insert it into the page. Any help/suggestions are appreciated!
Since you marked the question with the jQuery tag, I assume that you have the jQuery library loaded:
// Create the divs for the search results
var toolDiv = $("<div/>");
var toolDivPicture = $("<div/>");
var toolDivDescription = $("<div/>");
toolDivDescription.html("<h2>" + tool_name + "</h3>" + " <br>" + "Inventory Number: " + tool_inventory_number);
// Assign class to search result toolDiv and add content to it.
toolDiv.addClass("toolDiv");
toolDiv.append(toolDivDescription);
Note that you start a h2 but end a h3.
jsFiddle
Try this:
Wrap up your JavaScript in an onload function. So first add:
<body onload="loadJS()">
Then put your javascript in the load function, so:
function loadJS() {
// Assign tool attributes to Javascript Variables
var tool_name = String(tool['tool_name']);
tool_name = tool_name.replace(/'/g, '');
var tool_inventory_number = String(tool['tool_inventory_number']);
tool_inventory_number = tool_inventory_number.replace(/'/g, '');
var tool_recnum = String(tool['tool_recnum']);
tool_recnum = tool_recnum.replace(/'/g, '');
// Create the divs for the search results
var toolDiv = document.createElement("div");
var toolDivPicture = document.createElement("div");
//todo: Insert picture into this toolDivPicture div
var toolDivDescription = document.createElement("div");
toolDivDescription = toolDivDescription.innerHTML + "<h2>" + tool_name + "</h3>" + " <br>" + "Inventory Number: " + tool_inventory_number;
// Assign class to search result toolDiv and add content to it.
toolDiv.className = "toolDiv";
toolDiv.appendChild(toolDivDescription);
}
Okay, so let's say I have a textbox that you can enter something like
Sebastian Soria 3'|12' Digano
Nam Tae-Hee 23', 45'|33' Julio Vezbek
And that textarea does this upon focusing your mouse out of it, the texarea gets read line by line and each line looks for its delimeter "|" and then splits it up and divides that in home and away scorer.
Here's a JS fiddle: http://jsfiddle.net/cu24k/
I could easily do it so if it's above 10, to scrap the last 4 characters of " XX'" and 3 do " X'" and split that up and color/bold it. But then I realized, what if they scored more than once? It would be 23', 45' or longer!
So, I thought... what if I can just take apart any apostrophe, comma and number and color/bold that.
Is there a way?
I'm not 100% sure what you were trying to do, but I threw together what I think you were going for: http://jsfiddle.net/cu24k/1/
Here is the updated JS:
$(document).ready(function () {
$('.scorers').on('change', function () {
$("#home_scorers").text("");
$("#away_scorers").text("");
var lines = $('.scorers').val().split('\n');
for (var i = 0; i < lines.length; i++) {
var split = lines[i].split('|');
// get home data
var home = split[0];
var homeIndex = home.search( /\d+\'/ );
var homeTeam = home.substr( 0, homeIndex );
var homeScore = home.substr( homeIndex );
// get away data
var away = split[1];
var awayIndex = away.lastIndexOf( "'" ) + 1;
var awayScore = away.substr( 0, awayIndex );
var awayTeam = away.substr( awayIndex );
// output data
$("#home_scorers").append(
"<div>" + homeTeam +
"<b>" + homeScore + "</b>" +
"</div>");
$("#away_scorers").append(
"<div>" +
"<b>" + awayScore + "</b>" +
awayTeam + "</div>");
}
});
});
I use this jQuery code to append a div to another:
$('#sklep').on('click', '.kup', function () {
var cena = $('#cena').text();
var tytul = $('#tytul').text();
var iden = $('#id').text();
var suma = $('#koszykdiv .cyfry').text();
var dodawanie = parseInt(cena) + parseInt(suma);
$('.cyfry').text(dodawanie);
var source = $("#miniatura").attr("src");
$('.koszyk_content_items').append($('<div class="item_koszyk"><div class="miniatura_koszyk"><img width="165" height="110" src="' + source + '"/></div><span id="opis">' + tytul + ' - ' + cena + ' zł - </span><span class="identyfikator" style="display:none;">' + iden + '</span>USUŃ</div>'));
var licznik = $('#koszykdiv .licznik').text();
alert(licznik);
$('#identyfikator').text(licznik);
var licznik_dodawanie = parseInt(licznik) + 1;
$('#koszykdiv .licznik').text(licznik_dodawanie);
$.cookie("obraz" + licznik_dodawanie, id);
var cena = '';
var tytul = '';
var iden = '';
var source = '';
});
but it always appends a div with the same variables values, even if parent of '.kup' href has another text values. Can you help me and tell where the problem is?
You say in your question that you get the same variable values "even if parent of '.kup' href has another text values."
This is because nothing in your code is relative to the '.kup'-element. You get the src-attribute of the element with id=miniatura everytime.