Блог

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

Второй — тот, который я нашел в Интернете. Это позволяет вам превращать ссылки на изображения в флажки, которые можно устанавливать и снимать.

Я пытаюсь объединить эти два кода, чтобы программа могла генерировать случайное изображение (вместо буквы) на основе массива изображений (опять же вместо букв), которые пользователь устанавливает флажками. Короче говоря, я пытаюсь получить что-то вроде первого набора кода, который использует изображения вместо букв.

Затем последнее, что я пытаюсь сделать, это добавить ползунок диапазона следующим образом (https://www.w3schools.com/code/tryit.asp?filename=GJ5U82DC2JX9 ) под каждым изображением. Я хочу, чтобы пользователь мог использовать ползунок для «взвешивания» частоты каждого проверяемого изображения при окончательной рандомизации (с диапазоном от 0 до 10).

Вот первая программа в запущенной форме:

https://www.w3schools.com/code/tryit.asp?filename=GJ5TXX8V9B7L

Вот вторая программа в запущенной форме:

https://www.w3schools.com/code/tryit.asp?filename=GJ5TXEQM6HVI

Я пытался интуитивно копировать и вставлять из одного набора в другой, но, похоже, я не могу даже приблизиться к тому, чтобы работать так, как хотелось бы. Что касается взвешивания, я в недоумении.

Спасибо за любую помощь, и если это выходит за рамки справки для этого сайта, я приношу извинения.

Нравится это?

HTML-код:

 <div id="formMatrix">
  <ul>
  </ul>

  <input id="randomSubmit" type="submit" value="Randomize">
</div>

<div id="result">
  <br />
  <br />
</div>
  

JS-код:

 function updateTextInput(val, i) {
  document.getElementById('textInput-'   i).value = val;
}

document.addEventListener("DOMContentLoaded", function() {

  //put your image's links
  var images = ["http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png", "http://www.thebusinessofsports.com/wp-content/uploads/2010/10/facebook-icon-200x200.png", "http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png"];

  const form = document.getElementById("formMatrix");
  const submitBtn = document.getElementById("randomSubmit");
  const textResult = document.getElementById("result");

  for (var i = 0; i < images.length; i  ) {
    form.getElementsByTagName('ul')[0].innerHTML  = ("<li><input type='checkbox' id='chk-"   i   "' /><label for='chk-"   i   "'><img id='img-"   i   "' src='"   images[i]   "'/><div class='ranges'><input type='range' id='range-"   i   "' min='0' max='10' value='0' onchange='updateTextInput(this.value, "   i   ");' /><input type='text' disabled='disabled' id='textInput-"   i   "' value='0'/></div></label></li>");
  }

  // We check the values on the submit click
  submitBtn.addEventListener("click", function(e) {
    // Prevent it from *actually* submitting (e.g. refresh)
    e.preventDefault();
    // Grab *all* selected checkboxed into an array
    const items = document.querySelectorAll("#formMatrix input:checked");

    // Checking if it's not empty
    if (items.length > 0) {

      var array_items = [];

      // Convert object to array
      for (var i = 0; i < items.length; i  ) {
        array_items.push(items[i]);
      }

      // Add items by freq
      for (var i = 0; i < array_items.length; i  ) {
        var n = parseInt(document.getElementById('textInput-'   array_items[i].id.split('-')[1]).value);
        for (var j = 0; j < n; j  ) {
          array_items.splice(i   1, 0, array_items[i]);
        }
        i = (i   n);
      }

      // Setting a random index from items[0] to items[items.length]
      var imgid = ('img-'   array_items[Math.floor(Math.random() * array_items.length)].id.split('-')[1]);

      textResult.innerHTML = ("<label><img id='imgResult' src='"   document.getElementById(imgid).src   "'/></label>");

    } else {
      // If not, we alert
      alert("Please choose at least 1 image");
    }

  });
});
  

ДЕМОНСТРАЦИЯ:

https://jsfiddle.net/pr0mming/vfam3g05/31/

Чего я действительно не понимаю, так это части слайда, вы имеете в виду, что каждое изображение может иметь «весовое» число, что означает, что чем больше число, тем чаще оно должно выводиться?

ОБНОВЛЕНИЕ 1:

Самый простой способ, который я видел, состоял в том, чтобы временно обработать массив выбранных изображений, затем, если вес равен 10, в массив будут вставлены еще 10 изображений, соблюдающих порядок, и он будет выбран случайным образом.

ОБНОВЛЕНИЕ 2:

Последние изменения: https://jsfiddle.net/pr0mming/vfam3g05/33 /