-1
私は廊下の名前が入っている配列を持っています。配列値を使用して特定のイメージを画面に表示する方法は？
corridorPath = [c1, c2, c3, c4]
私がやりたいことは、配列をループして、すべての廊下にそれに関連付けられた廊下のイメージがあることです。 したがって、パスがc1-> c2-> c4の場合、出力は最初に廊下1のイメージ、次に廊下2のイメージ、次に廊下4のイメージになります。ボタンを使用してそれらをクリックします。
私の問題は、配列値を使用して表示される画像を変更する方法がわかりません。
私のHTMLコード：
<html>
<head><link rel="stylesheet" type="text/css" href="index.css"></head>
<h1 style="text-align:center;margin-top:80px"> IT Carlow Orientation App </h1>
<script type="text/javascript" src="script.js"></script>
<form onsubmit="return rrr()" method ="POST">
What room is closest to you: <input id="from" type="text"><br><br>
What room do you want to go to : <input id="to" type="text"><br><br>
<input type="submit">
</form>
</html>
私のJSコード：
function rrr(){
var INFINITY = 1/0;
function DirectedGraph(){
this.vertices = {};
this.addVertex = function(name, edges){
edges = edges || null;
this.vertices[name] = edges;
}
}
function findSmallest(dist, q) {
var min = Infinity;
var minNode;
for (var node in q) {
if (dist[node] <= min) {
min = dist[node]
minNode = node;
}
}
delete q[minNode]
return minNode;
}
function djikstra(graph, startVertex) {
var dist = {};
var prev = {};
var q = {};
var shortestPaths = {};
for (var vertex in graph.vertices) {
dist[vertex] = INFINITY;
prev[vertex] = null;
q[vertex] = graph.vertices[vertex];
shortestPaths[vertex] = [];
}
dist[startVertex] = 0;
while (Object.keys(q).length !== 0) {
var smallest = findSmallest(dist, q);
var smallestNode = graph.vertices[smallest]
//searches for the vertex u in the vertex set Q that has the least dist[smallest] value.
for (var neighbor in smallestNode) {
var alt = dist[smallest] + smallestNode[neighbor];
//smallestNode[neighbor] is the distance between smallest and neighbor
if (alt < dist[neighbor]) {
dist[neighbor] = alt
prev[neighbor] = smallest
}
}
}
getShortestPaths(prev, shortestPaths, startVertex, dist)
return {
shortestPaths: shortestPaths,
shortestDistances: dist
}
}
function getShortestPaths(previous, shortestPaths, startVertex, dist) { debugger
for (var node in shortestPaths) {
var path = shortestPaths[node];
while(previous[node]) {
path.push(node);
node = previous[node];
}
//gets the starting node in there as well if there was a path from it
if (dist[node] === 0) {
path.push(node);
}
path.reverse();
}
}
var graph = new DirectedGraph();
//graph.addVertex('S', {V: 1, W: 4});
//graph.addVertex('W', {T: 3});
//graph.addVertex('V', {W: 2, T: 6});
//graph.addVertex('T');
graph.addVertex('c1', {c2: 1, c3: 1, c7: 1});
graph.addVertex('c2', {c1: 1, c6: 1});
graph.addVertex('c3', {c1: 1, c4: 1});
graph.addVertex('c4', {c3: 1, c5: 1});
graph.addVertex('c5', {c4: 1, c6: 1});
graph.addVertex('c6', {c2: 1, c5: 1});
graph.addVertex('c7', {c1: 1, c8: 1, c13: 1, c14: 1});
graph.addVertex('c8', {c7: 1, c9: 1});
graph.addVertex('c9', {c8: 1, c10: 1, c11: 1});
graph.addVertex('c10', {c9: 1});
graph.addVertex('c11', {c9: 1, c12: 1});
graph.addVertex('c12', {c11: 1});
graph.addVertex('c13', {c7: 1, c32: 1, c35: 1});
graph.addVertex('c14', {c7: 1, c22: 1, c15: 1});
graph.addVertex('c15', {c14: 1, c16: 1, c18: 1});
graph.addVertex('c16', {c15: 1, c17: 1});
graph.addVertex('c17', {c16: 1});
graph.addVertex('c18', {c15: 1, c19: 1, c26: 1});
graph.addVertex('c19', {c18: 1, c20: 1, c27: 1});
graph.addVertex('c20', {c19: 1, c21: 1});
graph.addVertex('c21', {c20: 1});
graph.addVertex('c22', {c14: 1, c23: 1, c26: 1});
graph.addVertex('c23', {c22: 1, c24: 1});
graph.addVertex('c24', {c23: 1, c25: 1});
graph.addVertex('c25', {c24: 1});
graph.addVertex('c26', {c18: 1, c22: 1});
graph.addVertex('c27', {c19: 1, c28: 1});
graph.addVertex('c28', {c27: 1, c29: 1});
graph.addVertex('c29', {c28: 1, c30: 1});
graph.addVertex('c30', {c29: 1, c31: 1});
graph.addVertex('c31', {c30: 1});
graph.addVertex('c32', {c13: 1, c33: 1});
graph.addVertex('c33', {c32: 1, c34: 1});
graph.addVertex('c34', {c33: 1});
graph.addVertex('c35', {c13: 1, c36: 1});
graph.addVertex('c36', {c35: 1});
var to = document.getElementById('to').value;
var dest = document.getElementById('from').value;
var obj = {"A100": 1,"A102": 2, "A200": 3, "A201": 4, "A204": 5, "A205": 6, "A206": 7, "A207": 8, "A210": 9,
"A211": 10, "A212": 11, "A213": 12, "A216": 13, "A306": 14, "A307": 15, "A310": 16, "A311": 17,
"A312": 18, "A313": 19, "F208": 20, "F209": 21, "F210":22, "D404": 23, "D407": 24, "D410A": 25,
"D411": 26, "D410": 27, "D412": 28, "D413": 29, "D422": 30, "D426": 31, "D416": 32, "D417": 33,
"D501": 34, "D521": 35, "D522": 36, "D523": 37, "D502": 38, "D503": 39, "D504": 40, "D505": 41,
"D506": 42, "D507": 43, "D530": 44, "D531": 45, "D532": 46, "D508": 47, "D509": 48, "D510": 49,
"D511": 50, "D512": 51, "D513": 52, "D526": 53, "D527": 54, "D516": 55, "D517": 56, "D518": 57,
"C182": 58, "C185": 59, "C135": 60, "C136": 61, "C172": 62, "C173": 63, "C174": 64, "C175": 65,
"C176": 66, "C169": 67, "C170": 68, "C156": 69, "C149": 70, "C160": 71, "C162": 72, "C114": 73,
"C116": 74, "C118": 75, "C113": 76, "C115": 77, "C109": 78, "C101": 79, "C102": 80, "C104": 81,
"C105": 82, "C314": 83, "C316": 84, "C318": 85, "C321": 86, "C324": 87, "C325": 88, "C326": 89,
"C338": 90, "C339": 91, "C341": 92, "C344": 93, "C347": 94, "C348": 95, "C349": 96, "C350": 97,
"C351": 98, "C201": 99, "C202": 100, "C303": 101, "C305": 102, "C234": 103, "C233": 104,"C232": 105,
"C229": 106, "C228": 107, "C226": 108, "C225": 109, "C223": 110, "C220": 111, "C219": 112, "C218": 113,
"C210": 114, "C209": 115, "C208": 116, "C207": 117, "C206": 118, "C248": 119, "C246": 120, "C239": 121,
"C238": 122, "G101": 123, "G102": 124, "G103": 125, "G104": 126, "G106": 127, "G107": 128, "G108": 129,
"K102": 130, "K103": 131, "K104": 132, "K105": 133, "K106": 134, "K114": 135, "K115": 136, "K117": 137,
"K118": 138, "K202": 139, "K203": 140, "K204": 141, "K206": 142, "K207": 143, "K209": 144, "K210": 145,
"K221": 146, "K222": 147, "K302": 148, "K304": 149, "K305": 150, "K318": 151, "K319": 152, "K320": 153,
"K321": 154, "E801": 155, "E802": 156, "E803": 157, "E804": 158, "E805": 159, "E806": 160, "E807": 161,
"E808": 162, "E901": 163, "E902": 164, "E903": 165, "E904": 166, "E905": 167, "E906": 168, "E907": 169,
"E908": 170, "E909": 171, "E910": 172, "E911": 173, "L106": 174, "L107": 175, "L108": 176, "L109": 177,
"L110": 178, "L111": 179, "L112": 180, "L113": 181, "L114": 182, "L115": 183, "L116": 184, "L117": 185,
"L205": 186, "L206": 187, "L207": 188, "L208": 189, "L209": 190, "L210": 191, "L211": 192, "L212": 193,
"L213": 194, "L214": 195, "L215": 196, "L216": 197, "L217": 198};
x = obj[to];
if (x > 0 && x <= 19){
if(x >= 1 && x <= 2)
{
to = "c16";
}
else if(x >= 3 && x <= 19)
{
to = "c17";
}
}
else if (x >= 20 && x <= 22){
to = "c21";
}
else if (x >= 23 && x <= 57){
if(x >= 23 && x <= 26)
{
to = "c6";
}
else if(x >= 27 && x <= 31)
{
to = "c5";
}
else if(x >= 32 && x <= 33)
{
to = "c3";
}
}
else if (x >= 58 && x <= 122){
if(x >= 58 && x <= 59)
{
to = "c9";
}
else if(x >= 60 && x <= 61)
{
to = "c10";
}
else if(x >= 62 && x <= 69)
{
to = "c11";
}
else if(x >= 70 && x <= 72)
{
to = "c12";
}
}
else if (x >= 123 && x <= 129){
to = "c31";
}
else if (x >= 130 && x <= 154){
to = "c36";
}
else if (x >= 155 && x <= 173){
to = "c24";
}
else if (x >= 174 && x <= 198){
to = "c33";
}
y = obj[dest];
if (y > 0 && y <= 19){
if(y >= 1 && y <= 2)
{
dest = "c16";
}
else if(y >= 3 && y <= 19)
{
dest = "c17";
}
}
else if (y >= 20 && y <= 22){
dest = "c21";
}
else if (y >= 23 && y <= 57){
if(y >= 23 && y <= 26)
{
dest = "c6";
}
else if(y >= 27 && y <= 31)
{
dest = "c5";
}
else if(y >= 32 && y <= 33)
{
dest = "c3";
}
}
else if (y >= 58 && y <= 122){
if(y >= 58 && y <= 59)
{
dest = "c9";
}
else if(y >= 60 && y <= 61)
{
dest = "c10";
}
else if(y >= 62 && y <= 69)
{
dest = "c11";
}
else if(y >= 70 && y <= 72)
{
dest = "c12";
}
}
else if (y >= 123 && y <= 129){
dest = "c31";
}
else if (y >= 130 && y <= 154){
dest = "c36";
}
else if (y >= 155 && y <= 173){
dest = "c24";
}
else if (y >= 174 && y <= 198){
dest = "c33";
}
var result = djikstra(graph, dest);
switch(to){
case "c1":
s = result.shortestPaths.c1;
break;
case "c2":
s = result.shortestPaths.c2;
break;
case "c3":
s = result.shortestPaths.c3;
break;
case "c4":
s = result.shortestPaths.c4;
break;
case "c5":
s = result.shortestPaths.c5;
break;
case "c6":
s = result.shortestPaths.c6;
break;
case "c7":
s = result.shortestPaths.c7;
break;
case "c8":
s = result.shortestPaths.c8;
break;
case "c9":
s = result.shortestPaths.c9;
break;
case "c10":
s = result.shortestPaths.c10;
break;
case "c11":
s = result.shortestPaths.c11;
break;
case "c12":
s = result.shortestPaths.c12;
break;
case "c13":
s = result.shortestPaths.c13;
break;
case "c14":
s = result.shortestPaths.c14;
break;
case "c15":
s = result.shortestPaths.c15;
break;
case "c16":
s = result.shortestPaths.c16;
break;
case "c17":
s = result.shortestPaths.c17;
break;
case "c18":
s = result.shortestPaths.c18;
break;
case "c19":
s = result.shortestPaths.c19;
break;
case "c20":
s = result.shortestPaths.c20;
break;
case "c21":
s = result.shortestPaths.c21;
break;
case "c22":
s = result.shortestPaths.c22;
break;
case "c23":
s = result.shortestPaths.c23;
break;
case "c24":
s = result.shortestPaths.c24;
break;
case "c25":
s = result.shortestPaths.c25;
break;
case "c26":
s = result.shortestPaths.c26;
break;
case "c27":
s = result.shortestPaths.c27;
break;
case "c28":
s = result.shortestPaths.c28;
break;
case "c29":
s = result.shortestPaths.c29;
break;
case "c30":
s = result.shortestPaths.c30;
break;
case "c31":
s = result.shortestPaths.c31;
break;
case "c32":
s = result.shortestPaths.c32;
break;
case "c33":
s = result.shortestPaths.c33;
break;
case "c34":
s = result.shortestPaths.c34;
break;
case "c35":
s = result.shortestPaths.c35;
break;
case "c36":
s = result.shortestPaths.c36;
break;
default:
s = null;
break;
}
var corridorpath = "";
var corridorPath = new Array();
if(s != null){
for(x in s){
var i = 0;
corridorPath[i] = s[x];
i++;
alert(corridorPath);
}
}
else{
corridorpath = "Please enter a valid room number";
}
//alert(corridorpath);
var obj1 = {"c16": "images/c16.jpg", "c15": "images/c15.jpg","c18": "images/c18.jpg", "c19": "images/c19.jpg",
"c20": "images/c20.jpg", "c21": "images/c21.jpg"};
var corr = "c16";
pic = obj1[corr];
alert(pic)
};
まず第一に、私は私のコーディングは恐ろしいです知っています！
var corridorPath = [
'path/to/image1.jpg',
'path/to/image2.jpg',
'path/to/image3.jpg',
];
// find the element in the document where you want
// to put the images
var pathEl = document.getElementById('path');
// iterate over the array with image srcs
corridorPath.forEach(function (corridor) {
// create <img /> element
var imageEl = document.createElement('img');
// set img's src and alt text
imageEl.src = corridor;
imageEl.alt = "Image description here";
// append img element to the target element
pathEl.appendChild(imageEl);
});<div id="path"></div>corridorPathは、表示したい画像のアドレスが含まれていると仮定すると、以下のように
あなたのHTMLとJSの多くを追加すると、回答者に役立ちます。 –