Изменять картинки

[Hovik]

Привет всем!
Я хочу на чистом javascripte написать script, но не получается. Подскажите пожалуйста что я сделал не правильно. Задача такая при вебере флажка нужно изменять название картинке в тег img. Для этого я даже создал несколько массивов чтобы создать новы массив и сравнит с помощью if но не получается.

<!--FORM 1 START  есть 3 таких форм-->
<form  class="pasive" action="mail.php" method="post" name="landing" enctype="multipart/form-data">
                        <div class="pasive_up">
                            <img src="img/icon_cart.png" alt="" class="cart_logo">
                            <img src="img/stars/stars1.png" alt="" class="cart_star">
                        </div>
                        <p><input type="checkbox" id="cart_active1" data-price="4000" name="design"><label for="cart_active1">Дизайн</label></p>
                        <p><input type="checkbox" id="cart_active2" data-price="2000" name="logo"><label for="cart_active2">Лого</label></p>
                        <p><input type="checkbox" id="cart_active3" data-price="500" name="animation"><label for="cart_active3">Анимация</label></p>
                        <p><input type="checkbox" id="cart_active4" data-price="800" name="slider"><label for="cart_active4">Слаидер</label></p>
                        <p><input type="checkbox" id="cart_active5" data-price="800" name="galery"><label for="cart_active5">Галерия</label></p>
                        <p><input type="checkbox" id="cart_active6" data-price="600" name="contacts"><label for="cart_active6">Связи с сайта</label></p>
                        <p><input type="checkbox" id="cart_active7" data-price="600" name="chat"><label for="cart_active7">Онлайн чат</label></p>
                        <p><input type="checkbox" id="cart_active8" data-price="1300" name="seo"><label for="cart_active8">Оптимизация</label></p>
                        <p><label for="pasive_name1">имя и фамиля</label><input type="text" id="pasive_name1" name="name"></p>
                        <p><label for="pasive_email1">почта</label>      <input type="email" id="pasive_email1" name="email"></p>
                        <p><select name="select_contact" >
                            <option value="Skype">Skype</option>
                            <option value="Telegram">Telegram</option>
                            <option value="Viber">Viber</option>
                        </select>
                                                               <input type="text"id="pasive_phone1" name="number_contact"></p>
                        <p><label for="pasive_file1">ТЗ</label><input type="file" id="pasive_file1" value="ТЗ" name="file_tz"></p>
                        <span class="score" id="score1">Ваш заказ стоит 0 рублей</span>
                        <button class="count" >Заказать сейчас</button>
                        <i class="icon-cancel-circled cart_close"></i>
                    </form>

let one =    ['design', 'galery', 'slider', 'contacts'];
  let to =     ['design', 'galery', 'slider', 'contacts', 'logo', 'animation'];
  let three =  ['design', 'galery', 'slider', 'contacts', 'logo', 'animation', 'chat', 'seo'];
  let four =  ['design', 'text', 'pro', 'aux', 'logo', 'device', 'siti', 'action'];
  let five =  ['porto', 'back', 'front', 'fritail', 'languiges', 'lanch', 'chat', 'seo'];



     let pasiv =  document.querySelectorAll('.pasiv');
      for (let i = 0; i < pasiv.length; i++) {   
       let inp = pasiv[i].querySelectorAll('input[type="checkbox"]');
        for (let i = 0; i < inp.length; i++) {
         inp[i].oninput = function(){
          let mas = [];
           for (let i = 0; i < inp.length; i++) {
            if (inp[i].checked) {
               let star = 'img/stars/stars3.png';
       
                  star_img.src = star;
           }
          }
         
              }       
                }
              };

[рони]

Hovik,

[Hovik]

рони,
вот ссылка,
к стати калькулятор тоже смотрите, оцените код
http://test.strides.website/ кнопка подробно

[Hovik]

рони,
Я немножко изменял код, теперь по-моему стало понятным, все действие происходить по включение и отключение флажка, если включить флажок то сработает калькулятор и вместе с этим должен в пустом массиве добавятся значение текущего элемента а при отключение должен удалятся текущий элемент из массива. После этого сравниваем этот массив с 5 других массивов (one, too, three, four, five) и если совпадает с (too) то img.src = img2; если three то img.src = img3; дефолдные значение == img; Заранее благодарю за помощь.

window.onload = cart;
let one = ['design', 'galery', 'slider', 'contacts'];
let too = ['design', 'galery', 'slider', 'contacts', 'logo', 'animation'];
let three = ['design', 'galery', 'slider', 'contacts', 'logo', 'animation', 'chat', 'seo'];
let four = ['design', 'contacts', 'slider', 'galery'];
let five = ['design', 'galery',  'logo', 'animation', 'chat', 'seo'];

let img = 'img/stars/stars1.png';
let img2 = 'img/stars/stars2.png';
let img3 = 'img/stars/stars3.png';
let img4 = 'img/stars/stars4.png';
let img5 = 'img/stars/stars5.png';

function cart() {
   
    let masiv = [];
    let carts = document.querySelectorAll('.pasive');
    carts.forEach((item) => { 
        let sum = 0;
        let img = item.querySelector('.cart_star');
        let span = item.querySelector('.score');
        let checks = item.querySelectorAll('input[type="checkbox"]');
        checks.forEach((item, index) => {
            item.oninput = function() {
                if (item.checked) {
                    sum += Number(item.dataset.price);
                    span.innerHTML = 'first ' + sum + ' last';
                    // masiv.push(item.name);
                    // masiv.sort();
                    img.src = img2;
              masiv.splice( masiv.index, 0, item.name);



                       
                        console.log(index);
                        console.log(masiv);
                        console.log(item.index);
                } else {
                    sum -= Number(this.dataset.price);
                    span.innerHTML = 'first ' + sum + ' last';
                    masiv.splice( masiv.index, 1);

                    // console.log(item);
                    console.log(masiv);
                    // console.log(item.checked == 0);
                }
            };
            // console.log(item);
        })


        // console.log(img);


    });
};

[j0hnik]

фишка

let too = ['design', 'galery', 'slider', 'contacts', 'logo', 'animation'];
let three = too.concat(['chat', 'seo'])

[Hovik]

j0hnik,
Извините не понял, можете подробно объяснит.

[рони]

Hovik,

window.addEventListener("load", function() {
    let sample = [
        ['design', 'galery', 'slider', 'contacts'],
        ['design', 'galery', 'slider', 'contacts', 'logo', 'animation'],
        ['design', 'galery', 'slider', 'contacts', 'logo', 'animation', 'chat', 'seo'],
        ['design', 'contacts', 'slider', 'galery'],
        ['design', 'galery', 'logo', 'animation', 'chat', 'seo']
    ]
    let carts = [...document.querySelectorAll('.pasive')];
    carts.forEach((form) => {
        let sumOut = form.querySelector('.score');
        let img = form.querySelector('.cart_star')
        form.addEventListener("change", () => {
            let checks = [...form.querySelectorAll('input[type="checkbox"]:checked')];
            let sum = 0;
            let checksName = checks.map(item => (sum += +item.dataset.price, item.name));
            sumOut.innerHTML = 'first ' + sum + ' last';
            img.src = 'img/stars/stars1.png';
            sample.forEach((pattern, i) => {
                pattern.every(title => checksName.includes(title)) && (img.src = 'img/stars/stars' + (++i) + '.png')
            })
        })
    })
});

[Hovik]

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

let sample = [
        ['design', 'galery', 'slider', 'contacts'],                                                                      //stars1.png  
        ['design', 'galery', 'slider', 'contacts', 'chat', 'animation'],                                           //stars2.png
        ['design', 'galery', 'slider', 'contacts', 'logo', 'animation', 'chat', 'seo'],                         //stars3.png
        ['design', 'text', 'programing', 'seo'],                                                                         //stars1.png
        ['design', 'text', 'programing', 'seo', 'registration', 'panel'],   //stars2.png
        ['design', 'text', 'programing', 'seo', 'registration', 'panel', 'recording', 'languages'],       //stars3.png
        ['design', 'text', 'programing', 'seo', 'registration', 'panel', 'Online_shop', 'languages']    //stars3.png
    ]

[рони]

Hovik,
перенесите комментарии в массив stars и замените (++i)

[рони]

Hovik,
напишите так далее,

let sample = [{arr :['design', 'galery', 'slider', 'contacts'], src : 'stars1.png'}, ...]