HTML & Javascript - отображение кнопок только для указанных c объектов - PullRequest
Новая
       7

HTML & Javascript - отображение кнопок только для указанных c объектов

0 голосов
/ 30 января 2020

Итак, я создаю программу интернет-магазина в HTML и Javascript, где есть раскрывающееся меню различных отделов, и когда пользователь выбирает определенный отдел c, инвентарь для этого отдела отображается в тексте на HTML, в котором перечислены различные элементы.

Кажется, все работает нормально, но у меня возникают проблемы с выяснением того, как бы я вставил кнопки только для указанных ключей c для объектов, указанных в файле javascript , Как, например, я хочу, чтобы ключи отображались только для каждой строки в инвентаре отдела, которая заканчивается ценой. Я не уверен, как это сделать на HTML, так как я не могу сделать a для l oop или чего-либо еще.

Прямо сейчас мой файл HTML в основном показывает это ниже без кнопок , Но вот пример, где я хочу, чтобы кнопки в моем браузере go:

Mike's Computers

Ноутбуки

iMa c $ 2000 [КНОПКА]

Dell $ 600 [КНОПКА]

Компьютеры

Windows P C $ 1300 [КНОПКА]

Кнопки сейчас не нуждаются в какой-либо функциональности, я Я просто пытаюсь понять, как я буду перебирать все строки и размещать кнопки только в определенных местах. Я был бы очень признателен за любую помощь. Если у вас есть какие-либо ресурсы для этой конкретной проблемы c, я также буду рад их рассмотреть.

store. js: 

let electronics = {
    store: "Mike's Computers",
    inventory: {
        "Laptops": {
            0: {
                brand: "iMac",
                cost: 2000
            },
            1: { 
                brand: "Dell",
                cost: 600
            }
        },
        "Computers": {
            2: {
                brand: "Windows PC",
                cost: 1300
            }
        }
    }
};

function showOptions(){
    let userPicked = document.getElementById("list").value;
    var div = document.getElementById("div");
    if(userPicked == 'one'){
        var newContent = (electronics.store);
        newContent += '<br>';       
        Object.keys(electronics.inventory).forEach(key => {
           newContent += '<br>';
           newContent += key;
           newContent += '<br>';
           var items = Object.values(electronics.inventory[key]);
           items.forEach(item => {
              newContent += `&nbsp;  ${item.brand}  $${item.cost}`;
              newContent += '<br>';
           });
        });
        div.innerHTML = newContent;
    }else{
        alert("You must select a store.");
    }
}

store. html: 

<html>
    <head>
        <title>Welcome</title>
    </head>
    <body>
        <div><h1>Welcome</h1></div><br />
    <div class="dropdown">
        <form>
        <select name="list" id="list" accesskey="target">
            <option value="none">Pick store</option>
            <option value="one">Electronics</option> 
        </select>
        <input type=button value="Select" onclick="showOptions()" />
        </form>
        </div>
    </div>
    <div id="div"></div>
        <script src="store.js"></script>
    </body>
</html>

Ответы [ 3 ]

0 голосов
/ 30 января 2020

Вы ищете что-то подобное? 

let electronics = {
  store: "Mike's Computers",
  inventory: {
    "Laptops": {
      0: {
        brand: "iMac",
        cost: 2000
      },
      1: {
        brand: "Dell",
        cost: 600
      }
    },
    "Computers": {
      2: {
        brand: "Windows PC",
        cost: 1300
      }
    }
  }
};

function showOptions() {
  let userPicked = document.getElementById("list").value;
  var div = document.getElementById("div");
  if (userPicked == 'one') {
    var newContent = (electronics.store);
    newContent += '<br>';
    Object.keys(electronics.inventory).forEach(key => {
      newContent += '<br>';
      newContent += key;
      newContent += '<br>';
      var items = Object.values(electronics.inventory[key]);
      items.forEach(item => {
        newContent += `&nbsp;  ${item.brand}  $${item.cost}`;
        newContent += `<button onclick="showSelectedProduct('${key}','${item.brand}','${item.cost}')">Show Selected Product</button>`;
        newContent += '<br>';
      });
    });
    div.innerHTML = newContent;
  } else {
    alert("You must select a store.");
  }
}

function showSelectedProduct(cat, brand, price)
{
  alert(cat + "-" +brand + "-"+ price)
}
<html>

<head>
  <title>Welcome</title>
</head>

<body>
  <div>
    <h1>Welcome</h1>
  </div><br />
  <div class="dropdown">
    <form>
      <select name="list" id="list" accesskey="target">
        <option value="none">Pick store</option>
        <option value="one">Electronics</option>
      </select>
      <input type=button value="Select" onclick="showOptions()" />
    </form>
  </div>
  <div id="div"></div>
</body>

</html>
0 голосов
/ 30 января 2020

Вы можете включить разметку кнопок во внутреннюю l oop. Я также призываю вас не использовать элемент <br>.

Попробуйте выполнить следующее: 

let electronics = {
  store: "Mike's Computers",
  inventory: {
    "Laptops": {
      0: {
        brand: "iMac",
        cost: 2000
      },
      1: { 
        brand: "Dell",
        cost: 600
      }
    },
    "Computers": {
        2: {
          brand: "Windows PC",
          cost: 1300
        }
    }
  }
};

function showOptions(el){
    let userPicked = el.value;
    var div = document.getElementById("div");
    if(userPicked != 'none'){
        var newContent = (electronics.store);
        newContent += '<div>';       
        Object.keys(electronics.inventory).forEach(key => {
           newContent += key;
           newContent += '<div>';
           var items = Object.values(electronics.inventory[key]);
           items.forEach(item => {
              newContent += '<div>';
              newContent += `&nbsp; <span class="brand"> ${item.brand} </span>  <span class="price">$${item.cost}</span>`;
              newContent += `<input type=button value="Product" onclick="product(this)"/>`
              newContent += '</div>';
           });
           newContent += '</div>';
        });
        newContent += '</div>';
        div.innerHTML = newContent;
    }else{
        alert("You must select a store.");
    }
}

function product(product){
  console.clear();
  console.log(product.closest('div').textContent.trim())
}
<html>
    <head>
        <title>Welcome</title>
    </head>
    <body>
        <div><h1>Welcome</h1></div><br />
    <div class="dropdown">
        <form>
        <select name="list" id="list" accesskey="target" onchange="showOptions(this)">
            <option value="none">Select a restaurant</option>
            <option value="Electronics">Electronics</option> 
        </select>
        <input type=button value="Select" onclick="showMenuIntro()" />
        </form>
        
    </div>
    <div id="div"></div>
        <script src="store.js"></script>
    </body>
</html>
0 голосов
/ 30 января 2020

вы можете использовать jstl в вашем html коде, который jstl может использовать для тега 

<c:forEach var="item" items="${list}" begin=0 end=5 step=1 varStatus="status">
    count: ${status.count}
    name : ${item.name}
    age : ${item.age}
    address : ${item.addr}
</c:forEach>

, прежде чем использовать jstl, вы должны импортировать библиотеку тегов

...