hello does anybody know how to call a JavaScript function from a div? my div and function look like this:

@foreach(var c in Model.matrix.Cells)
{
    <tr>
     <td class="tdHouse" >
        <div onload="styleCell(event)" class="cell" id="styleCell" ondrop="drop(event,@c.row,@c.column)" ondragover="allowDrop(event)" alt="one">                                                                
        </div>   
            <label hidden id="@c.room.Id" class="existRoomStyle" ondragstart="drag(event)" onmouseup="dragMouseUp(event)" title="@c.room.roomName"  style= "background-color:@c.room.color"> @c.room.roomName</label>                                  
            <img  hidden id="@c.socket.Id" alt="existSocket" class="existSocketStyle" src="~/Images/socket.jpg"  draggable="true" ondragstart="drag(event)" onmouseup="dragMouseUp(event)" title="socket" alt="one"/>                                       
            <img  hidden id="@c.socket.machine.Id"class="existMachineStyle" src="~/Images/MachineImages/@c.socket.machine.Image" draggable="true" ondragstart="drag(event)" title="machine" alt="one"/>                                      

     </td>
   </tr>                        
  }

<script>
function styleCell(ev) {
    ev.target.children[0].appendChild(document.getElementById("existRoomStyle"));
    ev.target.children[0].appendChild(document.getElementById("existSocketStyle"));
    ev.target.children[0].appendChild(document.getElementById("existMachineStyle"));
 }
</script>

hello does anybody know how to call a JavaScript function from a div? my div and function look like this:

@foreach(var c in Model.matrix.Cells)
{
    <tr>
     <td class="tdHouse" >
        <div onload="styleCell(event)" class="cell" id="styleCell" ondrop="drop(event,@c.row,@c.column)" ondragover="allowDrop(event)" alt="one">                                                                
        </div>   
            <label hidden id="@c.room.Id" class="existRoomStyle" ondragstart="drag(event)" onmouseup="dragMouseUp(event)" title="@c.room.roomName"  style= "background-color:@c.room.color"> @c.room.roomName</label>                                  
            <img  hidden id="@c.socket.Id" alt="existSocket" class="existSocketStyle" src="~/Images/socket.jpg"  draggable="true" ondragstart="drag(event)" onmouseup="dragMouseUp(event)" title="socket" alt="one"/>                                       
            <img  hidden id="@c.socket.machine.Id"class="existMachineStyle" src="~/Images/MachineImages/@c.socket.machine.Image" draggable="true" ondragstart="drag(event)" title="machine" alt="one"/>                                      

     </td>
   </tr>                        
  }

<script>
function styleCell(ev) {
    ev.target.children[0].appendChild(document.getElementById("existRoomStyle"));
    ev.target.children[0].appendChild(document.getElementById("existSocketStyle"));
    ev.target.children[0].appendChild(document.getElementById("existMachineStyle"));
 }
</script>

• html
• javascript

• do you have to use raw javascript or do you have jquery at your disposal? – Nicholas King Commented May 10, 2013 at 10:29
• right now im using javascript but if you have a better idea i can try .. – Sylvie Shamir Commented May 11, 2013 at 9:58
• 1 possible duplicate of How to add onload event to a div? – DanMan Commented Mar 4, 2014 at 12:36
• Your question is not clear. A div is an HTML element, which is not something that can "call" a function. If it's really important that you run something after the div is present, just put the JS call somewhere after the div in the HTML. – user663031 Commented Oct 31, 2014 at 3:52

1 Answer 1

You can't call onload this way. w3schools list where no-load is applicable You must separate the function call from the div.

See this answer How to add onload event to a div element?