When I click a number close to the empty box, it should move (Beginner)
Question
Hi I'm pretty new too this and were wondering if somebody could help me with this "easy" tricky code, the thing is I want the numbers too move like a picture puzzle, soo when you click a number away from the empty box nothing happens but when you click a number beside it, the number will move to the location of the empty box and the box wil move to the number's last location. This is what I have so far :P
<!DOCTYPE html> <html> <head> <Style> div.container { display: flex; height: 28vh; } div.BundTekst { display: flex; height: 28vh; } div.number { color: White; background-color: black; margin: 10px; border: 10px solid red; display: flex; flex: 1; font-size: 500%; text-align: center; flex-direction: column; justify-content: center; } </style> </head> <body> <h1>Introduksjon til HTML, CSS og Javascript</h1> <div class="container"> <div id="A1" class="number" onclick="show(this)" >7</div> <div id="A2" class="number" onclick="show(this)" >2</div> <div id="A3" class="number" onclick="show(this)" >5</div> </div> <div class="container"> <div id="B1" class="number" onclick="show(this)" >1</div> <div id="B2" class="number" onclick="show(this)" ></div> <div id="B3" class="number" onclick="show(this)" >3</div> </div> <div class="container"> <div id="C1" class="number" onclick="show(this)" >6</div> <div id="C2" class="number" onclick="show(this)" >9</div> <div id="C3" class="number" onclick="show(this)" >8</div> </div> <script> var counter = 0; var lastClickedDiv; function show(tag, alt1, alt2, alt3, alt4){ if(alt1 && document.getElementById(alt2).innerHTML == 'Alt1') { tag.innerHTML = 'alt1'; } if(alt2 && document.getElementById(alt2).innerHTML == 'alt2') { tag.innerHTML = 'alt2'; } if(alt3 && document.getElementById(alt3).innerHTML == 'alt3') { tag.innerHTML = 'Alt3'; } if(alt4 && document.getElementById(alt4).innerHTML == 'alt4') { tag.innerHTML = 'Alt3'; } } </script> </body> </html>
1 answers
solution1
0 2017-05-23 12:34:23
Check the below code. Hope this is what you are looking for:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> div.container { display: flex; height: 28vh; } div.BundTekst { display: flex; height: 28vh; } div.number { color: White; background-color: black; margin: 10px; border: 10px solid red; display: flex; flex: 1; font-size: 500%; text-align: center; flex-direction: column; justify-content: center; } </style> </head> <body> <h1>Introduksjon til HTML, CSS og Javascript</h1> <div class="container"> <div id="A1" class="number">7</div> <div id="A2" class="number">2</div> <div id="A3" class="number">5</div> </div> <div class="container"> <div id="B1" class="number">1</div> <div id="B2" class="number empty"></div> <div id="B3" class="number">3</div> </div> <div class="container"> <div id="C1" class="number">6</div> <div id="C2" class="number">9</div> <div id="C3" class="number">8</div> </div> <script> $(".number").click(function(){ $(".empty").text($(this).text()).removeClass('empty'); $(this).addClass('active').text('').addClass('empty'); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Second toggel should be close when i click back to the first toggle
when i click the open button a text box should appear in the page
How can i get Select box close event when click out of the select box any where in window?
Close lightbox when click outside box
Close Dialog box when click outside
Jquery - Number formatting only works when I click in the input box
whenever i click outside the element it should close
How to close a `div` box in Angular when I click outside of it.Without using jQuery
Dropdown box close on click
Close box click outside of it
Related Tags