我正在尝试为魔术镜创建一堆div，然后将它们添加到创建的另一个动态div中。目前，我能够创建所有div。
接下来，我要在这些创建的div上进行轮播/幻灯片播放。
下面是我的代码。
// Override dom generator.
getDom: function () {
var wrapperEl = document.createElement("div");
var slideshow_container = document.createElement("div");
slideshow_container.className = "slideshow-container";
wrapperEl.appendChild(slideshow_container);
if (this.total_info != 'Hello World!') {
console.log('JSON.stringify(this.total_info)');
console.log(JSON.stringify(this.total_info));
console.log('JSON.stringify(this.total_info)');
var currentReport = this.total_info.records[0];
var returnedDataForTasks = this.total_info.records.reduce(function (keys, element) {
console.log(keys);
console.log(element);
console.log(Object.keys(element));
for (key in element) {
console.log('inside');
console.log(key)
if (key.includes('hrs')) {
keys.workloadRegion[key] = element[key];
} else if (key.includes('usd')) {
keys.pipeLineInfluencedRegion[key] = element[key];
} else if (key.includes('__c')) {
keys.assistInQueueRegion[key] = element[key];
}
}
return keys;
}, { workloadRegion: {}, pipeLineInfluencedRegion: {}, assistInQueueRegion: {} });
console.log('Keys are ' + JSON.stringify(returnedDataForTasks.pipeLineInfluencedRegion));
console.log('Keys are ' + JSON.stringify(returnedDataForTasks.workloadRegion));
console.log('Keys are ' + JSON.stringify(returnedDataForTasks.assistInQueueRegion));
wrapperEl.id = "myChartForWorkloads";
wrapperEl.setAttribute("style", "position: relative; background:white");
/*Pipeline Influence Data Start*/
var regionPipelineKeys = returnedDataForTasks.pipeLineInfluencedRegion;
var regionPipelineData = {};
var labels = [];
var datasets = [];
var nextKey = "";
var i = 0;
for (var newKey in regionPipelineKeys) {
var label = [];
var data = [0, 0, 0];
var indOutput = {};
var currKey = newKey;
var spaceCount = (currKey.split("_").length - 1);
console.log(currKey + "\t" + nextKey);
if (nextKey.length > 0) {
if (spaceCount > 3) {
if (!(currKey.split('_')[0] == nextKey.split('_')[0])) {
labels.push(currKey.split('_')[0]);
}
data[i] = parseFloat(regionPipelineKeys[currKey]);
label.push((currKey.split('_')[1]).split('_')[0]);
if ((currKey.split('_')[0] == nextKey.split('_')[0])) {
i++;
}
} else {
labels.push(currKey.split('_')[0]);
data[i] = parseFloat(regionPipelineKeys[currKey]);
label.push(currKey.split('_')[0]);
i++;
}
} else {
labels.push(currKey.split('_')[0]);
data[i] = parseFloat(regionPipelineKeys[currKey]);
label.push((currKey.split('_')[1]).split('_')[0]);
}
nextKey = currKey;
indOutput["label"] = label;
indOutput["data"] = data;
indOutput["backgroundColor"] = this.getRandomColor();
datasets.push(indOutput);
}
regionPipelineData["labels"] = labels;
regionPipelineData["datasets"] = datasets;
chartConfigPipelineInfluences = {
type: 'horizontalBar',
data: regionPipelineData,
options: {
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Pipeline Influenced ($MN)'
},
stacked: true,
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Region'
},
stacked: true,
}]
}
}
}
// Create chart canvas
const chartElPipelineInfluence = document.createElement("canvas");
chartElPipelineInfluence.style.display = "none"
chartElPipelineInfluence.className = "mySlides";
chartElPipelineInfluence.width = this.config.width;
chartElPipelineInfluence.height = this.config.height;
// chartEl.innerHTML = 'Hello world!';
slideshow_container.appendChild(chartElPipelineInfluence);
this.chart = new Chart(chartElPipelineInfluence.getContext("2d"), chartConfigPipelineInfluences);
// Append chart
slideshow_container.appendChild(chartElPipelineInfluence);
/*Pipeline Influence Data End*/
/*Workload by Region in Hours Start*/
var regionWorkloadKeys = returnedDataForTasks.workloadRegion;
var labels = Object.values(regionWorkloadKeys);
console.log("Region workload keys " + labels);
chartConfigWorkload = {
type: 'pie',
data: {
labels: Object.keys(regionWorkloadKeys),
datasets: [{
backgroundColor: ["#7ECFA2", "#866B42", "#77FF81", "#F127F8", "#9647BC", "#74CB15"],
data: Object.values(regionWorkloadKeys)
}]
},
options: {
cutoutPercentage: 80
}
}
console.log('^^^^^' + JSON.stringify(chartConfigWorkload));
//Create chart canvas
const chartElWorkload = document.createElement("canvas");
chartElWorkload.style.display = "none";
chartElWorkload.className = "mySlides";
chartElWorkload.width = this.config.width;
chartElWorkload.height = this.config.height;
// chartEl.innerHTML = 'Hello world!';
slideshow_container.appendChild(chartElWorkload);
this.chart = new Chart(chartElWorkload.getContext("2d"), chartConfigWorkload);
// Append chart
slideshow_container.appendChild(chartElWorkload);
/*Workload by Region in Hours End*/
/*Assists In Queue Start*/
var regionassistInQueueRegionKeys = returnedDataForTasks.assistInQueueRegion;
var labels = Object.values(regionassistInQueueRegionKeys);
console.log("Region workload keys " + labels);
chartConfigAssists = {
type: 'bar',
data: {
labels: Object.keys(regionassistInQueueRegionKeys),
datasets: [{
backgroundColor: ["#7ECFA2", "#866B42", "#77FF81", "#F127F8", "#9647BC", "#74CB15"],
data: Object.values(regionassistInQueueRegionKeys)
}]
},
options: {
cutoutPercentage: 80
}
}
// Create chart canvas
const chartElAssists = document.createElement("canvas");
chartElAssists.style.display = "none";
chartElAssists.className = "mySlides";
chartElAssists.width = this.config.width;
chartElAssists.height = this.config.height;
// chartEl.innerHTML = 'Hello world!';
slideshow_container.appendChild(chartElAssists);
this.chart = new Chart(chartElAssists.getContext("2d"), chartConfigAssists);
// Append chart
slideshow_container.appendChild(chartElAssists);
/*Assists In Queue End*/
this.startSlides();
Log.log("payload >> ");
}
return wrapperEl;
},
startSlides: function () {
alert("Actual Slides");
var slideIndex = 0;
var i;
var slides = document.getElementsByClassName("mySlides");
alert(slides.length);
//var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
// for (i = 0; i < dots.length; i++) {
// dots[i].className = dots[i].className.replace(" active", "");
// }
slides[slideIndex - 1].style.display = "block";
//dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
},
当我尝试运行此代码时，出现以下错误。
未捕获（承诺）TypeError：无法读取的属性“样式” 未定义 在Class.startSlides（qmReport.js：280） 在Class.getDom（qmReport.js：255） 在main.js：110 在新的Promise（） 在updateDom（main.js：109） 在Object.updateDom（main.js：514） 在Class.updateDom（module.js：358） 在Class.socketNotificationReceived（qmReport.js：295） 在module.js：246 在河（socketclient.js：25）
当我向输出alert(slides.length);发出警报时，它显示为0。
请让我知道我要去哪里哪里以及如何解决这个问题。
谢谢