getting data from html tag and going to another page

Question

As you can see i'm trying to get the data of an html tag which is an <img> tag and getting its src so when i drag and drop an image to my centerbox it goes to a specific page.

The problem is, it only goes to the first link in the first if statement which is "subpages/rice1.htm". Other else if wont work.

function doFirst(){
 mypic = document.getElementById('img1');
 mypic.addEventListener("dragstart", startDrag, false);

 mypictwo = document.getElementById('img2');
 mypictwo.addEventListener("dragstart", startDrag2, false);

 mypicthree = document.getElementById('img3');
 mypicthree.addEventListener("dragstart", startDrag3, false);

 mypicfour = document.getElementById('img4');
 mypicfour.addEventListener("dragstart", startDrag4, false);

     centerbox = document.getElementById("mainbox");
     centerbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
     centerbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
     centerbox.addEventListener("drop", dropped, false);
}

//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
 var code = '<img id="img1" src="images/rice1.png">';
 e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
 var code = '<img id="img2" src="images/rice2.png">';
 e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
 var code = '<img id="img2" src="images/rice3.png">';
 e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
 var code = '<img id="img2" src="images/rice4.png">';
 e.dataTransfer.setData('Text', code);
}
//--------------drop FUNCTIONS -----------------------//

function dropped(e){
 e.preventDefault();
 centerbox.innerHTML = e.dataTransfer.getData('Text'); 
 centerbox.getElementsByTagName("img")[0].style.width = "500px";
  centerbox.getElementsByTagName("img")[0].style.height = "500px";
}
function drop(event){
 
}
//--------------button functions -----------------------//



function doFunction(){
    if (confirm("Are you sure with the sauce?")) {
        if(centerbox.src == "images/rice1.png") {
            window.location.href = "subpages/rice1.htm";
        }
        else if (centerbox.src == "images/rice2.png") {
            window.location.href = "subpages/rice2.htm";
        }
        else if (centerbox.src == "images/rice3.png") {
            window.location.href = "subpages/rice3.htm";    
        }
    }
}


function reloadPage(){
   if (confirm("You sure want to remove sauce?")) {
    window.location.reload(); 
    
  }
}

window.addEventListener ("load", doFirst, false);

<!DOCTYPE html>
<html lang="en">
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="style.css">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

 <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
 <script src="drag.js"></script> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
 <div class="row">


  <div class="col-md-3" id="1box">
    <h5>SWEET AND SOUR</h5> 
    <img id="img1" src="images/sauce1.png">
  </div>
  <div class="col-md-3" id="2box">
    <h5>GRAVY</h5> 
    <img id="img2" src="images/sauce2.png">
  </div>
  <div class="col-md-3" id="3box">
    <h5>SALTED EGG</h5> 
    <img id="img3" src="images/sauce3.png">
  </div>
  <div class="col-md-3" id="4box">
    <h5>ORIENTAL SAUCE</h5> 
    <img id="img4" src="images/sauce4.png">
  </div>




 </div>
 </div>
 <div class="container">
  <div class="row">
   <div class="col-md-push-3 col-md-4 mainbox" ondrop="drop(event)" id="mainbox"> 
     <img id="centerimg" src="images/center.png">
   </div>
   

   

  </div>
  <div class="row">
   <center><h3>Are you sure with the sauce?</h3>
   <button id ="sure" onclick="doFunction(); return false;" type="button" class="btn btn-default" aria-label="Left Align">
     <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
   </button>
   <button id ="!sure" onclick="reloadPage(); return false;" type="button" class="btn btn-default" aria-label="Left Align">
     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
   </button>
   </center>
   
  </div>
 </div>

 <!-- hidden images here-->
 <img id="s1" class="img5" src="images/rice1.png">
 <img id="s2" class="img5" src="images/rice2.png">
 <img id="s3" class="img5" src="images/rice3.png">
 <img id="s4" class="img5" src="images/rice4.png">
 <!--end of hidden images-->
</body>
</html>

Here is the whole updated codes, as stated im trying to make a drag and drag website for food customization.

Hw are u setting value to your variable centerbox?? – Rajshekar Reddy Mar 14 '16 at 03:22 — Rajshekar Reddy, Mar 14 '16 at 03:22

Munawir · Answer 1 · 2016-03-14T08:14:12.777

Use double or triple = operator to compare, like,

if(centerbox.src == "images/rice1.png")

Single = is used to assign value.

function doFunction(){
    if (confirm("Are you sure with the sauce?")) {
        if(centerbox.src == "images/rice1.png") {
            window.location.href = "subpages/rice1.htm";
        }
        else if (centerbox.src == "images/rice2.png") {
            window.location.href = "subpages/rice2.htm";
        }
        else if (centerbox.src == "images/rice3.png") {
            window.location.href = "subpages/rice3.htm";    
        }
    }
}

Update :

You are trying to access the src attribute of a div not an img.

Create a new var of img tag, centerimg = document.getElementById("centerimg"); in doFirst() method.

The .src return the full url of the image source. Compare the image with full path.

Here is the updated snippet

function doFirst(){
 mypic = document.getElementById('img1');
 mypic.addEventListener("dragstart", startDrag, false);

 mypictwo = document.getElementById('img2');
 mypictwo.addEventListener("dragstart", startDrag2, false);

 mypicthree = document.getElementById('img3');
 mypicthree.addEventListener("dragstart", startDrag3, false);

 mypicfour = document.getElementById('img4');
 mypicfour.addEventListener("dragstart", startDrag4, false);

     centerbox = document.getElementById("mainbox");
     centerbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
     centerbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
     centerbox.addEventListener("drop", dropped, false);
  
     centerimg = document.getElementById("centerimg");    //Add this
}

//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
 var code = '<img id="img1" src="images/rice1.png">';
 e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
 var code = '<img id="img2" src="images/rice2.png">';
 e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
 var code = '<img id="img2" src="images/rice3.png">';
 e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
 var code = '<img id="img2" src="images/rice4.png">';
 e.dataTransfer.setData('Text', code);
}
//--------------drop FUNCTIONS -----------------------//

function dropped(e){
 e.preventDefault();
 centerbox.innerHTML = e.dataTransfer.getData('Text'); 
 centerbox.getElementsByTagName("img")[0].style.width = "500px";
  centerbox.getElementsByTagName("img")[0].style.height = "500px";
}
function drop(event){
 
}
//--------------button functions -----------------------//



function doFunction(){
    if (confirm("Are you sure with the sauce?")) {
        if(centerimg.src == "http://stacksnippets.net/images/center.png") {
            window.location.href = "subpages/rice1.htm";
        }
        else if (centerimg.src == "http://stacksnippets.net/images/center.png") {
            window.location.href = "subpages/rice2.htm";
        }
        else if (centerimg.src == "http://stacksnippets.net/images/center.png") {
            window.location.href = "subpages/rice3.htm";    
        }
    }
}


function reloadPage(){
   if (confirm("You sure want to remove sauce?")) {
    window.location.reload(); 
    
  }
}

window.addEventListener ("load", doFirst, false);

<!DOCTYPE html>
<html lang="en">
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="style.css">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

 <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
 <script src="drag.js"></script> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
 <div class="row">


  <div class="col-md-3" id="1box">
    <h5>SWEET AND SOUR</h5> 
    <img id="img1" src="images/sauce1.png">
  </div>
  <div class="col-md-3" id="2box">
    <h5>GRAVY</h5> 
    <img id="img2" src="images/sauce2.png">
  </div>
  <div class="col-md-3" id="3box">
    <h5>SALTED EGG</h5> 
    <img id="img3" src="images/sauce3.png">
  </div>
  <div class="col-md-3" id="4box">
    <h5>ORIENTAL SAUCE</h5> 
    <img id="img4" src="images/sauce4.png">
  </div>




 </div>
 </div>
 <div class="container">
  <div class="row">
   <div class="col-md-push-3 col-md-4 mainbox" ondrop="drop(event)" id="mainbox"> 
     <img id="centerimg" src="images/center.png">
   </div>
   

   

  </div>
  <div class="row">
   <center><h3>Are you sure with the sauce?</h3>
   <button id ="sure" onclick="doFunction(); return false;" type="button" class="btn btn-default" aria-label="Left Align">
     <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
   </button>
   <button id ="!sure" onclick="reloadPage(); return false;" type="button" class="btn btn-default" aria-label="Left Align">
     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
   </button>
   </center>
   
  </div>
 </div>

 <!-- hidden images here-->
 <img id="s1" class="img5" src="images/rice1.png">
 <img id="s2" class="img5" src="images/rice2.png">
 <img id="s3" class="img5" src="images/rice3.png">
 <img id="s4" class="img5" src="images/rice4.png">
 <!--end of hidden images-->
</body>
</html>

but when i use "==" it wont go to the page that i want, it only stays on the current page. do you need the html? — Redondo Velasco, Mar 14 '16 at 05:20

score 1 · Answer 2 · edited May 23 '17 at 12:07

1

your comparison is not correct.use double or triple equal mark.you are assigning values to src .

if(centerbox.src=="images/rice1.png"){ // same for other is/else blocks

getting data from html tag and going to another page

2 Answers2