CODEWITHSUNDEEP
javascripthtmlcss
Fernando Albuquerque
Fernando Albuquerque

Reputation: 45

Javascript not running when image clicked

In this I want to make appear a window when I click an image. The image is the address book one and it is supposed to appear an address book in the div id="janela2". I want it to be draggable and resizable but what is the most important here is to make it work because I believe the js code is correct but when I click on the image the address book doesn't appear.

The js code that is not running are the two first functions of the js and I don't know why. I only put the address book code so that you can see if it still works with the problem fixed. What is going on? How to solve it?

Check the codepen since the snippet is not working

The first part of it is solved. Now the windows shows up uppon clicking but now the address book doesn't work. https://codepen.io/Fropis/pen/mYydYd There's the new code but now the address book won't work. Why?

https://codepen.io/Fropis/pen/XwJWjg 

/**************************************** Contactos **********************************************************/
function openAB(){
    document.getElementById("janela2").innerHTML = document.getElementById("mydiv").innerHTML;
  }
  
  function fechar(){
    document.getElementById("janela2").innerHTML = "";
  }
 
 /*****************************THE ONE THAT MATTERS IS ABOVE****************/
  
   
html, body {
    width: 3779.527559055px;
   height: 100%;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   color: #444;
   -webkit-font-smoothing: antialiased;
   background-image: url("https://images4.alphacoders.com/111/111298.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 350% 100%;
   font-family: Arial, Helvetica, sans-serif;
}

/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
    background-color: none;
    left: 30%;
    position: absolute;
    bottom: 0;
    height: 500px;
    width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10%;
    padding-right: 10%;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    text-align: center;
    overflow: hidden;
  }

  #NetImg, #Home, #contact{
      width: 400px;
      height: 400px;
      padding:20px;
      background: none;
  }

  .panel {
    background: #fafafa;
    padding: 1em;
    width: 92.5%;
    margin: auto;
    max-width: 30em;
  }
  input {
    width: 100%;
    box-sizing: border-box;
    font-size: 1em;
    margin-top: 0.5em;
    padding: 0.5em;
  }
  input:focus {
    outline: none;
  }
  input::after {
    width: 100%;
    height: 10px;
    background: red;
  }
  .nav-list {
    width: 92.5%;
    max-width: 30em;
    text-align: center;
    margin: auto;
  }
  .nav-list li {
    list-style: none;
    display: inline-block;
    background: white;
    padding: 0.7em;
    margin: 0 0.1em;
  }
  .nav-list .active {
    background-color: black;
  }

  #janela2{
    position: absolute;
    width:1900px;
    height:1500px;
    left:1500px;
    top:550px;
    border-radius:20px black solid;
  }
  
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="cale.css">
</head>
<body>
<div id="janela2">OLA</div>

<div id="mydiv" style="display:none;">
        <div id="navigation">
            <ul class="nav-list">
                <li id="js-show-all">Mostrar Todos</li>
                <li id="js-search">Procurar</li>
                <li id="js-add-new">Adicionar Contacto</li>
            </ul>
        </div>
        <div id="search-panel" class="panel">
            <h1>Procurar Contacto</h1>
            <form id="search" action="#">
                <div id="results"></div>
                <div>
                    <label>
                        <input type="text" name="search" id="search" placeholder="Insira nome do contacto" />
                    </label>
                </div>
                        <input type="submit" value="Procurar"/>
            </form>
        </div>
            <div id="contact-panel" class="panel">
                <form id="contact" action="#">
                    <h1>Adicionar Novo Contacto</h1>
                    <div>
                        <label>
                            <input type="text" name="person" id="name" placeholder="Jos&eacute Bigodes" required/>
                        </label>
                        <label>
                            <input type="text" name="phone" id="name" placeholder="912942923" maxlength="9" pattern=".{9,}"   required title="Insira 9 caracteres"/>
                        </label>
                        <label>
                            <input type="email" name="email" id="name" placeholder="[email protected]" pattern="[email protected]" required/>
                        </label>
                    </div>
                    <div>
                        <input type="submit" value="Adicionar" />
                    </div>
                </form>
            </div>
        <div id = "show-panel" class="panel">
        </div>
    </div>
    <div class="navbar">
            <a><img onclick="openAb()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact"></a>
        </div>
</body>
<script src=cale.js></script>
</html>

Upvotes: 0

Views: 167

Answers (2)

Harun
Harun

Reputation: 1237

Your function name is openAB but you are calling openAb

<img onclick="openAB()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact">

Upvotes: 0

crystalthinker
crystalthinker

Reputation: 1182

openAb has a typo in html vs openAB function in js . Replace with

 <img onclick="openAB()" ....

Upvotes: 2

Related Questions