CODEWITHSUNDEEP
javascripthtmljquerycss
hp2345
hp2345

Reputation: 149

Changing background color with else if statement - JQuery

I have this program that can make dynamically draggable <div></div>'s with text and a background color(red or blue) of the users choice. The user can then drag the div to a <td></td> in a table and the same text and background color of the dropped should be displayed.

But right now when you drag a div to a <td></td> the background color isn't (for some reason it gives the td a blue background color)

This is the function I'm using to change the background and text of the <td></td>:

    $("td").droppable({
  drop: function( event, ui ) { 
    var selectedDiv = event.target;
      $( this )
        .html(text);
          $("div").draggable();

      $( "#"+currentlyDragged ).remove();
  
  if ($(selectedDiv).css('background-color', 'blue')){
     $( this ).css('background-color', 'blue');
  } else if ($(selectedDiv).css('background-color', 'red')){
    $( this ).css('background-color', 'red');
  } 

  }
});

but it dosen't work, is my syntax incorrect?

Here the full version of my code:

var text;
var selectedText;
var inputBox = document.getElementById("input");

function showInputBox(){
   inputBox.style.display = "block";
}

function showSchedule(){
  var inputAssignments = document.getElementById("inputAssignments");
  var schedule = document.getElementById("schedule");

  inputAssignments.style.display = "none";
  schedule.style.display = "block";
}

var elementCounter = 0;
function addElement() { 

  var classN = event.target.id;

 text = document.getElementById("input").value;

  // create a new div element and give it a unique id
  var newDiv = document.createElement("div");

  newDiv.id = 'temp'+elementCounter;
  elementCounter++

  if (classN == "blue"){
    newDiv.style.backgroundColor = "blue;"
      } else if (classN == "red"){
    newDiv.style.backgroundColor = "red";
      } 

  // and give it some content
  var newContent = document.createTextNode(text); 
  
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 

  $(function() {
    
    var currentlyDragged;
 
    $("div").draggable({
     drag: function (e) {
         currentlyDragged = e.target.id
         selectedText = event.target;
         text = $(selectedText).html();     
    }
    });
  

    $("td").droppable({
      drop: function( event, ui ) { 
        var selectedDiv = event.target;
          $( this )
            .html(text);
              $("div").draggable();

          $( "#"+currentlyDragged ).remove();
      
      if ($(selectedDiv).css('background-color', 'blue')){
         $( this ).css('background-color', 'blue');
      } else if ($(selectedDiv).css('background-color', 'red')){
        $( this ).css('background-color', 'red');
      } 

      }
    });
  });
  document.getElementById("input").value = " ";
}
body{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

div {
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 100px;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}


.div3 {
  position: absolute;
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 10px;
  cursor: move;
  z-index: 10;
  height: 20px ;
  background-color: white;
  width: 20px;
  color: #fff;
}


.div {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: #2196F3;
  color: #fff;
}

.divRed {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: red;
  color: #fff;
}

td{
  border: 1px solid #d3d3d3;
  padding: 10px;
  height: 20px ;
  width: 200px;
}

div:hover {
  background-color: yellow;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>

<header id="inputAssignments">    
<h1>Input text:</h1>

    <input id="input" type="text" value="text">
    <button id="blue" onclick="addElement()" >Make it Blue</button> 
    <button id="red" onclick="addElement()" >Make it Red</button> 


    <h1 height="30px"></h1>

  <button id ="next" onclick="showSchedule()">Next</button>

</header>

<header id="schedule" style="display:none">

    <p>Drag your outputs to a td:</p>

<table border="1">
  <tr>
    <td width=100></td>
    <td width=100></td>
    <td width=100></td>
    <td width=100></td>
    <td width=100></td>
  </tr>
</table>


</header>
     <script src="script.js"></script>
  </body>

</html>

Upvotes: 1

Views: 1156

Answers (1)

punund
punund

Reputation: 4421

This use of .css

if ($(selectedDiv).css('background-color', 'blue')){

sets the property, not queries it. That's why you end up with blue elements. You may want to change it to

if ($(selectedDiv).css('background-color') == 'blue'){

Upvotes: 3

Related Questions