I made a cube that shows different info of the customer on each side of the cube. There are 6 different customers but only one cube with that customer info is showing up. The rest is hidden for some reason. How can I make those cubes appear with that customer data?
I've tried an array and a foreach. Nothing is working.
function drawCube(Data) {
$('#wrapD3Cube').append($('').has(D3Cube));
var custList = [];
for (var i = 0; i < Data.length; i++) {
var custList = Data[i];
for (var j = 0; j < Data.length; j++) {
drawCube([" + i + "][" + j + "] = + custList[j]);
custList += '<div id="side1" style="position: absolute; opacity: 1.05; background-color: #D5D8DC; width: 112px; height: 112px; " ' + i + Data[i].Customer + "'> </div>"
custList += '<div id="side2" style="position: absolute; opacity: 1.05; background-color: #81C784; width: 112px; height: 112px; font-size: 11px; text-align: center; font-weight: bold; " ' + i + "'>";
custList += '<table class="table table-sm table-light"><thead><tr><td>Customer ID</tr></td></thead></table> ';
custList += Data[i].Customer;
custList += "</div>"
custList += '<div id="side3" style="position: absolute; opacity: 2.05; background-color: #FFF59D; width: 112px; height: 112px; font-size: 11px; font-weight: bold; text-align: center; " ' + i + "'>";
custList += '<table class="table table-sm table-light"><thead><tr><td>Inserted Time</tr></td></thead></table> ';
custList += Data[i].Time;
custList += "</div>"
custList += '<div id="side4" style="position: absolute; opacity: 1.05; background-color: #EF9A9A; width: 112px; height: 112px; font-size: 11px; font-weight: bold; text-align: center; " ' + i + "'>";
custList += '<table class="table table-sm table-light"><thead><tr><td>Status</tr></td></thead></table> ';
custList += Data[i].Status;
custList += "</div>"
custList += '<div id="side5" style="position: absolute; opacity: 1.05; background-color: #B2EBF2; width: 112px; height: 112px; font-size: 11px; font-weight: bold; text-align: center; " ' + i + "'>";
custList += '<table class="table table-sm table-light"><thead><tr><td>Assign To</tr></td></thead></table> ';
custList += Data[i].Agent;
custList += "</div>"
//custList += "<br>";
custList += '<div id="side6" style="position: absolute; opacity: 1.05; background-color: #D5D8DC; width: 112px; height: 112px; font-weight: bold; text-align: center; " ' + i + "'>";
custList += "</div>"
// custList += "<br>";
// else {
//custList += Data.length + i + "<br>";
//break;
}
}
document.getElementById("D3Cube").innerHTML = custList;
Each cube has different customer data but only one cube shows up. There should be many cubes depending on how many customers are waiting.
Related
I am seeking help with my JavaScript script to make it expandable when a new item (video) is added to my SharePoint folder. I created a counter that counts each time the video button is selected and displays the new count inside a div. The script works as expected but I like to expand its capability to automatically adjust when a new video is added into the SharePoint video folder. The video is dynamically added to an HTML page when dropped into the folder. However, when I add a new video its loads into the zero-index position and move the others video down one; making the previous video in the zero-index position to the one position and so on. Can someone view my script and see; if possible, how I can make my current script adjust accordingly when the new video is loaded? I like to make it where I do not have to go back into script and renumber everything by hand when a new video is added. I hope this question make sense.
jQuery(document).on("click", "#column5", function() {
videoHits();
getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
$.each(data.d.results, function(i, item) {
var spDate = new Date(item.TimeCreated.split('T')[0]) //example: '2015-10-30T05:00:00Z'
var newTillDate = new Date();
spDate.setDate(spDate.getDate() + 2);
if (spDate <= newTillDate) {
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html("Videos");
} else {
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html('<img class="newArrow" style="width: 60px; position: relative; right: 5px; top: 0px;"src="../SiteAssets/SitePages/Test Page/icons/arrow-with_new2.gif" alt="logo">Videos');
}
});
});
});
///Read hits from growVideoHits List
function videoHits() {
jQuery(document).ready(function() {
var chartData = getListData("growVideoHits"); //vidHit
var data = [];
for (var i = 0; i < chartData.length; i++) {
data.push({
"label": chartData[i].Title
});
}
initChart(data);
});
function initChart(chartData) {
//console.log(chartData);
//Filter List Column for Specific Column Item
var view0 = chartData.filter(function(d) {
if (d["label"] == "Test Video") {
return d;
}
})
var view1 = chartData.filter(function(d) {
if (d["label"] == "GROW HHM Guest Speaker") {
return d;
}
})
var view2 = chartData.filter(function(d) {
if (d["label"] == "GROW Meeting 26 Aug 2020") {
return d;
}
})
var pageCount0 = view0.length;
var pageCount1 = view1.length;
var pageCount2 = view2.length;
d3.select('#vidHit0 span').html(pageCount0);
d3.select('#vidHit1 span').html(pageCount1);
d3.select('#vidHit2 span').html(pageCount2);
} //End of D3 function For Column Chart
function getListData(listName) {
var results;
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=Title";
$.ajax({
url: requestUri,
type: "GET",
async: false,
headers: {
"ACCEPT": "application/json;odata=verbose"
},
success: function(data) {
results = data.d.results;
},
error: function() {
//alert("Failed to get details");
}
});
return results;
}
}
////Play Buttons
jQuery(document).on("click", '[id^=growPlayPauseBtn]', function(e) {
growBtn_Event(e);
});
function growBtn_Event(e) {
if ($(e.target).attr("id") == 'growPlayPauseBtn0') {
//alert('0');
var title = "Test Video";
AddListItem(title);
videoClip0.play();
jQuery("#growPlayPauseBtn0").html("Pause");
jQuery("#growPlayPauseBtn0").fadeOut();
}
if ($(e.target).attr("id") == 'growPlayPauseBtn1') {
//alert('1');
var title = "GROW HHM Guest Speaker";
AddListItem(title);
videoClip1.play();
jQuery("#growPlayPauseBtn1").html("Pause");
jQuery("#growPlayPauseBtn1").fadeOut();
}
if ($(e.target).attr("id") == 'growPlayPauseBtn2') {
/// alert('2');
var title = "GROW Meeting 26 Aug 2020";
AddListItem(title);
videoClip2.play();
jQuery("#growPlayPauseBtn2").html("Pause");
jQuery("#growPlayPauseBtn2").fadeOut();
}
}
function AddListItem(TitleField) {
$().SPServices({
operation: "UpdateListItems",
async: false,
batchCmd: "New",
listName: "growVideoHits", //vidHit
valuepairs: [
["Title", TitleField]
],
completefunc: function(xData, Status) {
//alert("Data Saved! and Please check your List");
}
});
}
How I add content to the HTML: I use the REST API get option to detect a new item loaded into the SharePoint folder.
getFilesFromFolder("/sites/dcsa/ep/epMainFilesBI/video").done(function(data){
Then I concatenate the items from the folder onto the HTML page with the below script:
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn'+ i +'" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip'+ i +'"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit'+ i +'">Views: <span></span></div></li>');
if i have well understood your code, the new item are created in the else part so i suggest you to do a first loop to detect old videos from new videos and create html after:
getFilesFromFolder("/sites/dcsa/ep/epMainFiles/BI/video").done(function(data) {
$.each(data.d.results, function(index, item) {
var spDate = new Date(item.TimeCreated.split('T')[0]) //example: '2015-10-30T05:00:00Z'
var newTillDate = new Date();
spDate.setDate(spDate.getDate() + 2);
var newitems = [], olditems= [];
if (spDate <= newTillDate) {
olditems.push(item);
} else {
newitems.push(item);
}
var nbrolditems = olditems.length;
for(let i = 0;i < nbrolditems; i++){
let item = olditem[i];
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html("Videos");
}
for(let j = 0;j < newitems.length; j++){
let item = olditem[j;
let i = j + nbrolditems;
jQuery("#hiddenWrapper").fadeIn();
$("#column1 ol").append('<li style="width:30%; height: auto; position: relative; left: 5%; padding-right: 10px; padding-bottom: 10px; text-align: center; font-size: 12px; float: left;" data-event-date="' + item.TimeCreated.split("T")[0] + '"><div class="btnImg" id="growPlayPauseBtn' + i + '" style="width: 285px; height: 225px; position: absolute; top: 20px; z-index: 10; cursor: pointer; padding: 10px; color: white; background-color: rgba(43, 92, 171, .35); display: block;">Play Video</div><video width="100%" height="auto" controls onended="videoEnded1()" id="videoClip' + i + '"><source src="' + item.ServerRelativeUrl + '" type="audio/mpeg" >' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</video><span style="text-align: center; font-size: 12px; float: left; clear: both;" "' + item.TimeCreated.split("T")[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + item.TimeCreated.split('T')[0] + '</span></br><div class="vidViews" id="vidHit' + i + '">Views: <span></span></div></li>');
$("#column1 h3").html('<img class="newArrow" style="width: 60px; position: relative; right: 5px; top: 0px;"src="../SiteAssets/SitePages/Test Page/icons/arrow-with_new2.gif" alt="logo">Videos');
}
});
});
Another idea is to sort the list by date of creation of video....
So I'm fairly new to HTML and JS and i wanted to add some brackets and a equal sign around this grid of input forms in order to make it look more like a system of matrices. Idea: https://imgur.com/a/nH9xET2
I've tried positioning them on the CSS sheet with position absolute for each bracket but then if I change the matrix's size or resize the browser's window, it doesn't work. How would i do this in the CSS or in the HTML/Javascript file so the brackets rescale for bigger sizes and stay in the correct spot?
span {
font-family: 'Latin Modern Math';
position: absolute;
top: 228px;
vertical-align: text-top;
font-size: 56px;
}
.a1 {
position: absolute;
left: 40px;
}
.a2 {
position: absolute;
left: 618px;
}
.x1 {
position: absolute;
left: 679px;
}
.x2 {
position: absolute;
left: 780px;
}
.igual {
position: absolute;
left: 820px;
top: 220px;
vertical-align: text-top;
font-size: 58px;
}
.b1 {
position: absolute;
left: 882px;
}
.b2 {
position: absolute;
left: 982px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/linear" method="post">
<div class="col-auto my-1">
<select style="margin: 15px 0px 20px;" id="dim_select" name="dim_select" class="custom-select largura" onchange="change()">
<option disabled selected>Dimension</option>
{% for i in range(3, 8) %}
<option>{{ i }}</option>
{% endfor %}
</select>
</div>
<!-- MATRIZ A GERADA POR JS -->
<div id="matrizAcontainer">
</div>
<script type="text/javascript">
$(document).ready(function() {
grid(3, 3);
});
function change() {
var select = document.getElementById("dim_select");
var index = select.selectedIndex
var n = parseInt(select.value);
grid(n, n);
};
function grid(rows, cols) {
var table = '<span class="a1">[</span>';
table += "<table>";
var size = ((screen.availWidth / 2.45) / rows) + "px";
for (i = 0; i < rows; i++) {
table += '<tr class="spacing-50">';
for (j = 0; j < cols; j++) {
table += '<td>' + '<input class="matrizA" name="A' + (i + 1) + (j + 1) + '" placeholder="a' + (i + 1) + (j + 1) + '"/>' + '</td>';
}
if (i == 0) {
table += '<span class="a2">]</span>';
table += '<span class="x1">[</span>';
table += '<span class="x2">]</span>';
table += '<div class="igual">=</div>';
table += '<span class="b1">[</span>';
}
table += '<td><input class="matrizX" placeholder="x' + (i + 1) + '" disabled/></td>';
table += '<td><input class="matrizB" name="B' + (i + 1) + '" placeholder="b' + (i + 1) + '"/></td>';
table += "</tr>";
}
table += "</table>";
table += '<span class="b2">]</span>';
$("#matrizAcontainer").empty();
$("#matrizAcontainer").append(table);
$("tr").css("height", 32 + "px");
$("input").css("width", size);
$(".matrizX").css("text-align", "center");
$(".matrizX").css("margin-left", 80 + "px").css("width", 80 + "px");
$(".matrizX").css("background", "#dedddf");
$(".matrizB").css("margin-left", 120 + "px").css("width", 80 + "px");
var bracket = (32 * (rows + 1));
$("span").css("transform", "scaleY(" + (bracket / 50) + ")");
}
</script>
<button style="margin: 20px 0px 20px; width: auto;" class="btn btn-primary btn-submit" type="submit"><b>Solve</b></button>
</form>
Based on this answer.
body{
display: flex;
}
#mainDiv {
height: 100px;
width: 8px;
position: relative;
border-bottom: 4px solid black;
border-top: 4px solid black;
background: transparent;
}
#borderLeft {
border-left: 4px solid black;
position: absolute;
top: 0;
bottom: 0;
}
#borderRight {
border-left: 4px solid black;
position: absolute;
top: 0;
bottom: 0;
margin-left : 4px;
}
#mainDivRight {
height: 100px;
width: 8px;
position: relative;
border-bottom: 4px solid black;
border-top: 4px solid black;
background: transparent;
margin-left:0;
}
<div id="mainDiv">
<div id="borderLeft"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div id="mainDivRight">
<div id="borderRight"></div>
</div>
Different idea:
Size the width and height as you wish, or set it to auto.
Use an svg image for the background.
div{
width:200px;
height:100px;
background: lightblue url("https://cdn1.iconfinder.com/data/icons/mathematics-line-3/48/113-512.png");
background-size: 100% 100%;
background-repeat: no-repeat;}
<div id="brackets">
</div>
The user can save some pictures from a list that will be stored in a div containing the thumbnails of the saved pictures. I dynamically resize the containing div to be big enough to contain all the thumbnails. As long as I use an img tag to contain the thumbnails everything works fine, as in the following screenshot:
The code I use to build the div:
currentPictures.innerHTML += "<img class='preview' id='spic" + picId + "' " +
"onclick='showImageOnCanvas(\"" + sourceImg + "\", " + picId + ")' " +
"oncontextmenu='removeSavedPicture(\"spic" + picId + "\");' " +
"src='" + sourceImg + "'> ";
css for .preview:
.preview {
cursor: pointer;
width: 80px;
height: 54px;
border: black 2px solid;
}
This is the css of the containing div (some of this values are changed programmatically according to the number of thumbnails saved):
#currentPictures {
margin: auto;
position: absolute;
top: 38px;
left: 300px;
width: 300px;
height: 320px;
z-index: 16;
background-color: #DDDDDD;
border: 1px solid #999999;
padding: 16px 16px 16px 16px;
border-radius: 6px;
font-family: arial;
text-align: center;
vertical-align: middle;
font-size: 12px;
display: none;
overflow-y: none;
overflow-x: scroll;
-ms-user-select: none;
}
Now I want to put the img in a div, in order to add some text to the picture. The problem is that as soon as I wrap the img in a div, the divs are stacked and not put next to each other, as in this screenshot:
The code:
currentPictures.innerHTML += "<div><img class='preview' id='spic" + picId + "' " +
"onclick='showImageOnCanvas(\"" + sourceImg + "\", " + picId + ")' " +
"oncontextmenu='event.preventDefault(); removeSavedPicture(\"spic" + picId + "\");' " +
"src='" + sourceImg + "'></div> ";
I tried to use different display styles on the div but with no success.
I'm pretty sure I'm missing something obvious. Thanks!
I have been working on a quiz application and I ran into a problem. My goal is to make the button show when the check button is clicked but it just won't work.
var pos = 0,
test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
["What is num equal to?", "6", "5", "Potato", "A", "A Variable is something that can store data, like a number or a String (Some text). They can be written as an int or as a string. EXAMPLE: ", "https://s1.postimg.org/nqvwnr0un/Untitled.png"],
["What is 7 x 3?", "21", "24", "25", "A"],
["What is 8 / 2?", "10", "2", "4", "C"]
];
function _(x) {
return document.getElementById(x);
}
function renderQuestion() {
test = _("test_q");
text = _("test_t");
if (pos >= questions.length) {
test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
_("test_status").innerHTML = "Test Completed";
pos = 0;
correct = 0;
return false;
}
var BarPercent = (100 / questions.length) * (pos + 1);
var pb = document.getElementById("pb");
pb.style.width = BarPercent + "%";
var qresult = false;
function showResult(correct) {
if (correct === true) {
document.getElementById("Result").style.visibility = "visible";
}
}
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
info = questions[pos][5];
if (questions[pos][6] !== undefined) {
img = questions[pos][6];
} else {
img = ""
}
test.innerHTML = "<h4 style='color: #DDD;'>" + info + "</h3><br><img src='" + img + "' style='align: center; width: 50%;'>";
test.innerHTML += "<h3>" + question + "</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> " + chA + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> " + chB + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> " + chC + "<br><br>";
test.innerHTML += "<button id='sub_button'style='color: green; background-color: #CCC; border: 0px; width: 100%; text-align: left; font-weigth: 100px; font-size: 70px; border-radius: 20px;' onclick='checkAnswer()'>Check</button>";
}
function checkAnswer() {
choices = document.getElementsByName("choices");
for (var i = 0; i < choices.length; i++) {
if (choices[i].checked) {
choice = choices[i].value;
}
}
if (choice == questions[pos][4]) {
correct++;
qresult = true;
showResult(qresult);
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
div {
border-radius: 20px;
}
#test_q {
background-color: #AAA;
padding: 10px 40px 40px 40px;
}
body {
font-family: sans-serif;
background-color: AAA;
color: #EEE;
}
#pbc {
width: 100%;
height: 16px;
background: #444;
border-radius: 10px;
margin-bottom: 20px;
}
#pbc>#pb {
position: relative;
top: 0px;
background: #1D4;
width: 0%;
height: 16px;
color: #0FF;
text-align: center;
border-radius: 10px;
}
#Result {
margin-top: 150px;
width: 100%;
height: 100px;
max-height: 100px;
background-color: lightgreen;
position: absolute;
margin-bottom: 25px;
border-radius: 20px;
border: 0px;
visibility: hidden;
}
#result {
color: green;
text-align: left;
margin-left: 20px;
}
<div id="pbc">
<div id="pb">
</div>
</div>
<div id="test_q"></div>
<button id="Result" onclick="renderQuestion()">
<h1 id="result"></h1>
</button>
I've just changed some of your own code,
Try this:
var pos = 0,
test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
["What is num equal to?", "6", "5", "Potato", "A", "A Variable is something that can store data, like a number or a String (Some text). They can be written as an int or as a string. EXAMPLE: ", "https://s1.postimg.org/nqvwnr0un/Untitled.png"],
["What is 7 x 3?", "21", "24", "25", "A"],
["What is 8 / 2?", "10", "2", "4", "C"]
];
function _(x) {
return document.getElementById(x);
}
function renderQuestion() {
test = _("test_q");
text = _("test_t");
if (pos >= questions.length) {
test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
document.getElementById("result").innerHTML = "Test Completed";
pos = 0;
correct = 0;
return false;
}
var BarPercent = (100 / questions.length) * (pos + 1);
var pb = document.getElementById("pb");
pb.style.width = BarPercent + "%";
var qresult = false;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
info = questions[pos][5];
if (questions[pos][6] !== undefined) {
img = questions[pos][6];
} else {
img = ""
}
test.innerHTML = "<h4 style='color: #DDD;'>" + info + "</h3><br><img src='" + img + "' style='align: center; width: 50%;'>";
test.innerHTML += "<h3>" + question + "</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> " + chA + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> " + chB + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> " + chC + "<br><br>";
test.innerHTML += "<button id='sub_button'style='color: green; background-color: #CCC; border: 0px; width: 100%; text-align: left; font-weigth: 100px; font-size: 70px; border-radius: 20px;' onclick='checkAnswer()'>Check</button>";
}
function showResult(correct) {
if (correct === true) {
document.getElementById("Result").style.display = "block";
}
}
function checkAnswer() {
choices = document.getElementsByName("choices");
for (var i = 0; i < choices.length; i++) {
if (choices[i].checked) {
choice = choices[i].value;
}
}
if (choice == questions[pos][4]) {
correct++;
qresult = true;
showResult(qresult);
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
div {
border-radius: 20px;
}
#test_q {
background-color: #AAA;
padding: 10px 40px 40px 40px;
}
body {
font-family: sans-serif;
background-color: AAA;
color: #EEE;
}
#pbc {
width: 100%;
height: 16px;
background: #444;
border-radius: 10px;
margin-bottom: 20px;
}
#pbc>#pb {
position: relative;
top: 0px;
background: #1D4;
width: 0%;
height: 16px;
color: #0FF;
text-align: center;
border-radius: 10px;
}
#Result {
margin-top: 150px;
width: 100%;
height: 100px;
max-height: 100px;
background-color: lightgreen;
position: absolute;
margin-bottom: 25px;
border-radius: 20px;
border: 0px;
display: none;
}
#result {
color: green;
text-align: left;
margin-left: 20px;
}
<div id="pbc">
<div id="pb">
</div>
</div>
<div id="test_q"></div>
<button id="Result" onclick="renderQuestion()">
<h1 id="result"></h1>
</button>
I have a function that renders an object in html.
.item {
padding: 10px;
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid #666;
background: #ddd;
}
.item h4 {
font-size: 18px;
text-align: center;
}
.item h5 {
font-size: 14px;
text-align: center;
}
.item img {
width: 200px;
height: 200px;
}
I seem to be missing a formatting issue. The JS compiles properly, no errors, but both the h4 tag and the h5 tag render outside the , even though in code the closing div tag is after the h4 and h5 tags.
Here ids the HTML after it gets rendered in the browser
<div class="menuHolder" id="menuContainer">
for (var i = 0; i < foodItems.length; i++) {
document.getElementById("menuContainer").innerHTML += '<div class="item"> <img src="' + foodItems[i].image + '" >';
document.getElementById("menuContainer").innerHTML += '<h4> ' + foodItems[i].name + '</h4>';
document.getElementById("menuContainer").innerHTML += '<h5> $' + foodItems[i].price + '</h5>';
document.getElementById("menuContainer").innerHTML += '</div>';
console.log("Item: " + foodItems[i].name + " Cost: $" + foodItems[i].price);
}
.item {
padding: 10px;
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid #666;
background: #ddd;
}
.item h4 {
font-size: 18px;
text-align: center;
}
.item h5 {
font-size: 14px;
text-align: center;
}
.item img {
width: 200px;
height: 200px;
}
<div class="menuHolder" id="menuContainer">
<div class="item">
<img src="images/hamburger.jpg"></div>
<h4>Hamburger</h4>
<h5>$2.99</h5><div class="item">
<img src="images/fries.jpg"></div>
<h4>Fries</h4>
<h5>$1.99</h5>
<div class="item">
<img src="images/donuts.jpg">
</div>
<h4>Donuts</h4>
<h5>$0.99</h5>
</div>
Try this:
for (var i = 0; i < foodItems.length; i++) {
var tmpstr = '<div class="item"> <img src="' + foodItems[i].image + '" >';
tmpstr += '<h4> ' + foodItems[i].name + '</h4>';
tmpstr += '<h5> $' + foodItems[i].price + '</h5>';
tmpstr += '</div>';
document.getElementById("menuContainer").innerHTML = tmpstr;
console.log("Item: " + foodItems[i].name + " Cost: $" + foodItems[i].price);
}
When you added string to innerHTML, browsers may "auto correct" the html and added at the end.
P.S. you may need to take care of escaping characters in your foodItems[i].name.