Форум

voraa · #11 (**permalink**) 23.06.2023, 17:48

Комбинация будет новой, но сами рисунки старые

<!DOCTYPE html>
<html>
<head>
<style>       
        [data-id="girl"] {
            background-image:url(https://loremflickr.com/100/100/girl?random=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="boy"] {
            background-image:url(https://loremflickr.com/100/100/boy?random=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="cat"] {
            background-image:url(https://loremflickr.com/100/100/cat?random=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="dog"] {
            background-image:url(https://loremflickr.com/100/100/dog?random=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="car"] {
            background-image:url(https://loremflickr.com/100/100/car?random=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="house"] {
            background-image:url(https://loremflickr.com/100/100/house?random=1);
            width: 100px;
            height: 100px;
            }
    </style>
 
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
	const tab = document.querySelector('table');
	const cells = [...document.querySelectorAll('td.Image')];
	const btn = document.getElementById('btn');
	function show2x2 () {
		cells.sort(() =>Math.round(Math.random())-0.5);
		tab.rows[0].innerHTML = '';
		tab.rows[0].append(...cells.slice(0,2));
		tab.rows[1].innerHTML = '';
		tab.rows[1].append(...cells.slice(2,4));
	};
	btn.addEventListener('click', show2x2);
	show2x2();
});
</script>
</head>
<body>
  
<table align="center" cellspacing="0" cellpadding="0">
            <tr>
                <td class="Image" data-id="girl"></td>
                <td class="Image" data-id="boy"></td>
                <td class="Image" data-id="cat"></td>                
            </tr>
            <tr>
                <td class="Image" data-id="dog"></td>
                <td class="Image" data-id="car"></td>
                <td class="Image" data-id="house"></td>                
            </tr>
        </table>
        <button id="btn">New</button> 
</body>
</html>

voraa · #12 (**permalink**) 23.06.2023, 19:13

А вот так и картинки меняются

<!DOCTYPE html>
<html>
<head>
<style id="style">    
		[data-id] {
            width: 100px;
            height: 100px;
		}
        [data-id="girl"] {
            background-image:url(https://loremflickr.com/100/100/girl?random=1);
            }
  
         [data-id="boy"] {
            background-image:url(https://loremflickr.com/100/100/boy?random=1);
            }
  
         [data-id="cat"] {
            background-image:url(https://loremflickr.com/100/100/cat?random=1);
            }
  
         [data-id="dog"] {
            background-image:url(https://loremflickr.com/100/100/dog?random=1);
            }
  
         [data-id="car"] {
            background-image:url(https://loremflickr.com/100/100/car?random=1);
            }
  
         [data-id="house"] {
            background-image:url(https://loremflickr.com/100/100/house?random=1);
            }
    </style>
 
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
	const tab = document.querySelector('table');
	const cells = [...document.querySelectorAll('td.Image')];
	const btn = document.getElementById('btn');
	
	let nr = 1;
	function changeStyle () {
		nr++;
		cells.forEach (cell=>{
			const id = cell.dataset.id;
			cell.style.backgroundImage = `url(https://loremflickr.com/100/100/${id}?random=${nr})`;
		})
	}
	
	function show2x2 () {
		cells.sort(() =>Math.round(Math.random())-0.5);
		tab.rows[0].innerHTML = '';
		tab.rows[0].append(...cells.slice(0,2));
		tab.rows[1].innerHTML = '';
		tab.rows[1].append(...cells.slice(2,4));
	};
	
	btn.addEventListener('click', () => {changeStyle(); show2x2()});
	show2x2();
});
</script>
</head>
<body>
  
<table align="center" cellspacing="0" cellpadding="0">
            <tr>
                <td class="Image" data-id="girl"></td>
                <td class="Image" data-id="boy"></td>
                <td class="Image" data-id="cat"></td>                
            </tr>
            <tr>
                <td class="Image" data-id="dog"></td>
                <td class="Image" data-id="car"></td>
                <td class="Image" data-id="house"></td>                
            </tr>
        </table>
        <button id="btn">New</button> 
</body>
</html>

Борис К · #13 (**permalink**) 23.06.2023, 20:03

Да, Вы отлично всё поняли! Варианты с кнопкой работают просто идеально

Voraa, огромное спасибо Вам!

Борис К · #14 (**permalink**) 06.07.2023, 08:07

Здравствуйте, Voraa!

В принципе возможно ли реализовать то, что я нафантазировал ниже, разбирая код, представленный выше Вами?)
Например, в таблице рандомно отразились изображения чисел "6", "1", "4", "2". Необходимо пройтись кликами по ним в порядке возрастания "1", "2", "4", "6" до выведения alert "OK!"
P.S. Понимаю, что изображения должны быть переименованы в "01.jpg", "02.jpg" и т.д.

<!DOCTYPE html>
<html>
<head>
<style>       
        [data-id="1"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="2"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
            width: 100px;
            height: 100px;
            }
  
         [data-id="3"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
            width: 100px;
            height: 100px;
            }
  
         [data-id="4"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
            width: 100px;
            height: 100px;
            }
  
         [data-id="5"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
            width: 100px;
            height: 100px;
            }
  
         [data-id="6"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
            width: 100px;
            height: 100px;
            }
    </style>
 
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
	const tab = document.querySelector('table');
	const cells = [...document.querySelectorAll('td')];
	const btn = document.getElementById('btn');
        let win;
	function show2x2 () {
		cells.sort(() =>Math.round(Math.random())-0.5);
		tab.rows[0].innerHTML = '';
		tab.rows[0].append(...cells.slice(0,2));
		tab.rows[1].innerHTML = '';
		tab.rows[1].append(...cells.slice(2,4));
	};

        if (win) alert("OK!");

	btn.addEventListener('click', show2x2);
	show2x2();
});
</script>
</head>
<body>
  
        <table>
            <tr>
                <td data-id="1"></td>
                <td data-id="2"></td>
                <td data-id="3"></td>               
            </tr>
            <tr>
                <td data-id="4"></td>
                <td data-id="5"></td>  
                <td data-id="6"></td>               
            </tr>
        </table>
        <button id="btn">New</button> 
</body>
</html>

voraa · #15 (**permalink**) 06.07.2023, 08:48

<html>
<head>
<style> 
td {
	width: 100px;
	height: 100px;
}
        [data-id="1"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
            }
   
         [data-id="2"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
            }
   
         [data-id="3"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
            }
   
         [data-id="4"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
            }
   
         [data-id="5"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
            }
   
         [data-id="6"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
            }
    </style>
  
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
    const tab = document.querySelector('table');
    const cells = [...document.querySelectorAll('td')];
    const btn = document.getElementById('btn');
    
    let nclick;
    let wiewCellsNum = [];
    
    function show2x2 () {
        cells.sort(() =>Math.round(Math.random())-0.5);
        tab.rows[0].innerHTML = '';
        tab.rows[0].append(...cells.slice(0,2));
        tab.rows[1].innerHTML = '';
        tab.rows[1].append(...cells.slice(2,4));
        nclick = 0;
        wiewCellsNum = [...document.querySelectorAll('td')]
			.map(td => +td.dataset.id)
			.sort();
    }
    
    tab.addEventListener('click', ({target}) => {
		if (target.nodeName === 'TD') {
			const curnum = +target.dataset.id;
			if (curnum != wiewCellsNum[nclick]) {
				alert ('Error! Try again.')
			} else {
				nclick++;
				if (nclick === 4) alert("OK!");
			}
		}
    });
 
 
    btn.addEventListener('click', show2x2);
    show2x2();
});
</script>
</head>
<body>
   
        <table>
            <tr>
                <td data-id="1"></td>
                <td data-id="2"></td>
                <td data-id="3"></td>              
            </tr>
            <tr>
                <td data-id="4"></td>
                <td data-id="5"></td> 
                <td data-id="6"></td>              
            </tr>
        </table>
        <button id="btn">New</button>
</body>
</html>

Борис К · #16 (**permalink**) 06.07.2023, 10:32

Чудеса JS-волшебства!

Сообщение от voraa

td {
width: 100px;
height: 100px;
}

Да, спасибо, что напомнили!) Я упустил этот момент оформления стилей, увлёкшись другим вопросом...
Voraa, моя огромная благодарность за полученные знания!

P.S. Я провозился

приличное количество времени с ещё одной кнопкой, которая бы перемешивала уже созданную таблицу, а не создавала новую, но безрезультатно

... такое возможно?

рони · #17 (**permalink**) 06.07.2023, 10:54

Сообщение от Борис К

кнопкой, которая бы перемешивала уже созданную таблицу,

<html>
<head>
<style>
td {
    width: 100px;
    height: 100px;
}
        [data-id="1"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
            }

         [data-id="2"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
            }

         [data-id="3"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
            }

         [data-id="4"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
            }

         [data-id="5"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
            }

         [data-id="6"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
            }
    </style>

<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
    const tab = document.querySelector('table');
    const cells = [...document.querySelectorAll('td')];
    const btn = document.getElementById('btn');

    let nclick;
    let wiewCellsNum = [];

    function show2x2 () {
        cells.sort(() =>Math.round(Math.random())-0.5);
        tab.rows[0].innerHTML = '';
        tab.rows[0].append(...cells.slice(0,2));
        tab.rows[1].innerHTML = '';
        tab.rows[1].append(...cells.slice(2,4));
        nclick = 0;
        wiewCellsNum = [...document.querySelectorAll('td')]
            .map(td => +td.dataset.id)
            .sort();
    }
    function mix2x2 () {
        let cells = [...document.querySelectorAll('td')].sort(() =>Math.round(Math.random())-0.5);
        tab.rows[0].innerHTML = '';
        tab.rows[0].append(...cells.slice(0,2));
        tab.rows[1].innerHTML = '';
        tab.rows[1].append(...cells.slice(2,4));
        nclick = 0;
        wiewCellsNum = [...document.querySelectorAll('td')]
            .map(td => +td.dataset.id)
            .sort();
    }
    tab.addEventListener('click', ({target}) => {
        if (target.nodeName === 'TD') {
            const curnum = +target.dataset.id;
            if (curnum != wiewCellsNum[nclick]) {
                alert ('Error! Try again.')
            } else {
                nclick++;
                if (nclick === 4) alert("OK!");
            }
        }
    });


    btn.addEventListener('click', show2x2);
    show2x2();
    blend.addEventListener('click', mix2x2);
});
</script>
</head>
<body>

        <table>
            <tr>
                <td data-id="1"></td>
                <td data-id="2"></td>
                <td data-id="3"></td>
            </tr>
            <tr>
                <td data-id="4"></td>
                <td data-id="5"></td>
                <td data-id="6"></td>
            </tr>
        </table>
        <button id="btn">New</button>
        <button id="blend">Mix</button>
</body>
</html>

Борис К · #18 (**permalink**) 06.07.2023, 11:04

Вот оно что!

Я был крайне далёк от самостоятельного решения

Voraa, Рони, какие же вы молодцы!!!!

Борис К · #19 (**permalink**) 06.07.2023, 12:27

Рони, извините, что морочу голову своими "экспериментами", сам себе усложняя задачу, но так интереснее обучаться новому

А возможно, чтобы изображения менялись местами при очередном клике на них, а не через кнопку?
Я тупо переместил id="blend" из button в table, но тогда при перемешивании нарушается правильная очерёдность кликов на изображениях... такое вообще возможно реализовать?

voraa · #20 (**permalink**) 06.07.2023, 12:52

<html>
<head>
<style>
td {
    width: 100px;
    height: 100px;
}
        [data-id="1"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
            }
 
         [data-id="2"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
            }
 
         [data-id="3"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
            }
 
         [data-id="4"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
            }
 
         [data-id="5"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
            }
 
         [data-id="6"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
            }
    </style>
 
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
    const tab = document.querySelector('table');
    const cells = [...document.querySelectorAll('td')];
    const btn = document.getElementById('btn');
 
    let nclick;
    let wiewCellsNum = [];
 
    function show2x2 () {
        cells.sort(() =>Math.round(Math.random())-0.5);
        tab.rows[0].innerHTML = '';
        tab.rows[0].append(...cells.slice(0,2));
        tab.rows[1].innerHTML = '';
        tab.rows[1].append(...cells.slice(2,4));
        nclick = 0;
        wiewCellsNum = [...document.querySelectorAll('td')]
            .map(td => +td.dataset.id)
            .sort();
    }
    
    function mix2x2 () {
        let cells = [...document.querySelectorAll('td')].sort(() =>Math.round(Math.random())-0.5);
        tab.rows[0].innerHTML = '';
        tab.rows[0].append(...cells.slice(0,2));
        tab.rows[1].innerHTML = '';
        tab.rows[1].append(...cells.slice(2,4));
    }
    
    tab.addEventListener('click', ({target}) => {
        if (target.nodeName === 'TD') {
            const curnum = +target.dataset.id;
            if (curnum != wiewCellsNum[nclick]) {
                alert ('Error! Try again.')
            } else {
                nclick++;
                if (nclick === 4) {
					alert("OK!");
					nclick = 0;
				}
            }
           mix2x2();
        }
    });
 
 
    btn.addEventListener('click', show2x2);
    show2x2();
    blend.addEventListener('click', () => {mix2x2(); nclick = 0});
});
</script>
</head>
<body>
 
        <table>
            <tr>
                <td data-id="1"></td>
                <td data-id="2"></td>
                <td data-id="3"></td>
            </tr>
            <tr>
                <td data-id="4"></td>
                <td data-id="5"></td>
                <td data-id="6"></td>
            </tr>
        </table>
        <button id="btn">New</button>
        <button id="blend">Mix</button>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript