CODEWITHSUNDEEP
javascripthtml
Thomas Karlsen
Thomas Karlsen

Reputation: 3

Retrieving div "value" to javascript

So, im trying to code a simple sliding puzzle and got really stuck. I've got a 3x3 sqare with diffrent "values"

Now, im trying to move the number to the blank space and vice versa.

So my question is how can i, in the easiest possible manner, change my 'test' text to the value of the clicked div ?

All answers and tips are truely appreciated

-Karlsen

EDIT :

Added full code, its a bit more understanding now i think :

          var counter = 0;
					var lastClickedDiv;


					function show(tag, alt1, alt2, alt3, alt4) {
					  if (alt1 && document.getElementById(alt1).innerHTML == '') {
					    document.getElementById(alt1).innerHTML = 'test';
					    tag.innerHTML = '';
					  }

					  if (alt2 && document.getElementById(alt2).innerHTML == '') {
					    document.getElementById(alt2).innerHTML = 'test1';
					    tag.innerHTML = '';
					  }

					  if (alt3 && document.getElementById(alt3).innerHTML == '') {
					    document.getElementById(alt3).innerHTML = 'test2';
					    tag.innerHTML = '';
					  }

					  if (alt4 && document.getElementById(alt4).innerHTML == '') {
					    document.getElementById(alt4).innerHTML = 'test3';
					    tag.innerHTML = '';
					  }
					}
		div.container {
			display: flex;
			height: 28vh;
		}
			div.number {
				color:	black;
				background-color: rgb(140,0,0);
				margin: 10px;
				border: 10px solid black;
				display: flex;
				flex: 1;
				font-size: 500%;
				text-align: center;
				flex-direction: column;
				justify-content: center;
			}
<!DOCTYPE html>
<html>
	<head>

	</head>
		<body>

			<H1> Sliding Puzzle </H1>

			<div class="container">
			  <div id="a1" class="number" onclick="show(this, 'a2', 'b1')">8</div>
			  <div id="a2" class="number" onclick="show(this, 'a1', 'a3', 'b2')">5</div>
			  <div id="a3" class="number" onclick="show(this, 'a2', 'b3')">4</div>
			</div>

			<div class="container">
			  <div id="b1" class="number" onclick="show(this, 'a1', 'b2', 'c1')">6</div>
			  <div id="b2" class="number" onclick="show(this, 'a2', 'b1', 'b3', 'c2')">7</div>
			  <div id="b3" class="number" onclick="show(this, 'a3', 'b2', 'c3')">2</div>
			</div>

			<div class="container">
			  <div id="c1" class="number" onclick="show(this, 'b1', 'c2')">1</div>
			  <div id="c2" class="number" onclick="show(this, 'c1', 'b2', 'c3')">3</div>
			  <div id="c3" class="number" onclick="show(this, 'c2', 'b3')"></div>
			</div>
		</body>
</html>

Upvotes: 0

Views: 86

Answers (3)

DASH
DASH

Reputation: 297

I think you want this, please try to run this code:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            div.container {
                display: flex;
                height: 28vh;
            }
            div.number {
                color:  black;
                background-color: rgb(140,0,0);
                margin: 10px;
                border: 10px solid black;
                display: flex;
                flex: 1;
                font-size: 500%;
                text-align: center;
                flex-direction: column;
                justify-content: center;
            }

        </style>
    </head>
    <body>
        <H1> Sliding Puzzle </H1>
        <div class="container">
            <div data-cell="0,0" class="number" >8</div>
            <div data-cell="0,1" class="number">5</div>
            <div data-cell="0,2" class="number">4</div>
        </div>
        <div class="container">
            <div data-cell="1,0" class="number">6</div>
            <div data-cell="1,1" class="number">7</div>
            <div data-cell="1,2" class="number">2</div>
        </div>
        <div class="container">
            <div data-cell="2,0" class="number">1</div>
            <div data-cell="2,1" class="number">3</div>
            <div data-cell="2,2" class="number"></div>
        </div>
        <script>

            //By defaul to null as we will calculate
            var emptyCell = null;
            var numbersEls = document.getElementsByClassName('number');
            for (var counter = 0, max = numbersEls.length; counter < max; counter++) {
                var el = numbersEls[counter];
                el.addEventListener('click', onNumberCellClick);
                if(el.innerHTML == ''){
                    emptyCell = el;             
                }
            }               

            function onNumberCellClick(clickedEl){
                var clickedEl = this;
                var cellIdentifier = getCellIdentifier(clickedEl);

                //if empty cell not null
                if(emptyCell){              

                    var swapPositions = getCellSwapAvailability(cellIdentifier);

                    //We can move the cell
                    if(swapPositions.indexOf(emptyCell.dataset.cell) > -1){
                        emptyCell.innerHTML = clickedEl.innerHTML;                  

                        //Swap the position as the empty cell is changed;
                        emptyCell = clickedEl;
                        emptyCell.innerHTML = '';
                    }
                }
            }

            function getCellSwapAvailability(identifier){
                //Calculate where cell can be moved
                var positions = [];
                var pos = identifier.row + ',' + (identifier.col-1);
                positions.push(pos);
                var pos = identifier.row + ',' + (identifier.col+1);
                positions.push(pos);
                var pos = (identifier.row-1) + ',' + (identifier.col);
                positions.push(pos);
                var pos = (identifier.row+1) + ',' + (identifier.col);
                positions.push(pos);
                return positions;
            }

            function getCellIdentifier(cell){
                var cellIndex = cell.dataset.cell;
                var identifierArr = cellIndex.split(',');
                var r = Number(identifierArr[0]);
                var c = Number(identifierArr[1]);
                return {row: r, col: c};
            }
        </script>
    </body>
    </html>

Changed from jQuery to javascript

Upvotes: 0

Omri Luzon
Omri Luzon

Reputation: 4224

You had an extra "." as @DASH suggested at line 4 in javascript, and you have a missing ' at line 4 in in the HTML.

I added a bit of CSS to see better if you don't mind.

function show(tag, alt1, alt2, alt3, alt4) {
  if (alt1 && document.getElementById(alt1).innerHTML == '') {
    document.getElementById(alt1).innerHTML = 'test';
    tag.innerHTML = '';
  }

  if (alt2 && document.getElementById(alt2).innerHTML == '') {
    document.getElementById(alt2).innerHTML = 'test1';
    tag.innerHTML = '';
  }

  if (alt3 && document.getElementById(alt3).innerHTML == '') {
    document.getElementById(alt3).innerHTML = 'test2';
    tag.innerHTML = '';
  }

  if (alt4 && document.getElementById(alt4).innerHTML == '') {
    document.getElementById(alt4).innerHTML = 'test3';
    tag.innerHTML = '';
  }
}
.container {
  display: flex;
  width: 200px;
  background-color: beige;
  justify-content: space-around;
}

.number {
  flex-basis: 100%;
  height: 50px;
  margin: 5px;
  border: 1px solid black;
  cursor: pointer;
}
<div class="container">
  <div id="a1" class="number" onclick="show(this, 'a2', 'b1')">8</div>
  <div id="a2" class="number" onclick="show(this, 'a1', 'a3', 'b2')">5</div>
  <div id="a3" class="number" onclick="show(this, 'a2', 'b3')">4</div>
</div>

<div class="container">
  <div id="b1" class="number" onclick="show(this, 'a1', 'b2', 'c1')">6</div>
  <div id="b2" class="number" onclick="show(this, 'a2', 'b1', 'b3', 'c2')">7</div>
  <div id="b3" class="number" onclick="show(this, 'a3', 'b2', 'c3')">2</div>
</div>

<div class="container">
  <div id="c1" class="number" onclick="show(this, 'b1', 'c2')">1</div>
  <div id="c2" class="number" onclick="show(this, 'c1', 'b2', 'c3')">3</div>
  <div id="c3" class="number" onclick="show(this, 'c2', 'b3')"></div>
</div>

Upvotes: 1

DASH
DASH

Reputation: 297

First you have error in the javascript at line 4, 

document.getElementById(alt1).innerHTML. = 'test';

there cannot be "." after innerHTML.

May be that is the problem and you not able to run your JS

Upvotes: 1

Related Questions