JavaScript - Poner 2 funciones en javascript en una pagina web

   
Vista:

Poner 2 funciones en javascript en una pagina web

Publicado por helpme (2 intervenciones) el 29/11/2017 18:28:51
Buenos dias chicos quiero poner 2 java script en mi pagina web el primero es un menu que se despiega y el otro un contador como le podria hacer para que se ejecuten los 2 scripts por que nomas me ejecuta el primero. se los agradeceria demasiado gracias

se llama cont.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
	<title>SideBar Menu</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
<div id="sidebar">
	 <br>
  <ul>
 
    <li>
        <form id="form1" name="form1" method="post" action="findeturno.php" autocomplete="off">
	    <input name="1" type="submit" class="btn" id="1" value="OPCION 1" />
        </form>
    </li>
    <li>
        <form id="form1" name="form1" method="post" action="menuprueba.php" autocomplete="off">
	    <input name="2" type="submit" class="btn" id="2" value="MODO PRUEBA" />
        </form>
    </li>
 
    <li>
		<form id="form1" name="form1" method="post" action="comentarios.php" autocomplete="off">
	    <input name="3" type="submit" class="btn" id="3" value="COMENTARIOS" />
        </form>
    </li>
 
    <li></li>
  </ul>
</div>
<div id="toggle-btn" onclick="toggleSidebar(this)">
  <span></span>
  <span></span>
  <span></span>
 
    <form>
    <label for="contador">Contador:</label><input type="text" id="contador">
    </form>
 
 
 
 
<script>
	function toggleSidebar(ref)
	{
  ref.classList.toggle('active');
  document.getElementById('sidebar').classList.toggle('active');
  }
  </script>
 
 
  <script>
  var cont = 0;
function contador(){
	var contador = document.getElementById("contador");
	contador.value = cont;
	cont++;
}
 
 </script>
 
 
 
</body>
</html>




y este se llama style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  font-family:"Bree Serif",sans-serif;
}
body {
  overflow:hidden;
  background-color: #41517F;
  margin:15px;
  padding:15px;
	font-family:"Helvetica Neue", Helvetica, Arial;
   cursor: pointer
}
 
 
.btn {
  -webkit-border-radius: 16;
  -moz-border-radius: 16;
  border-radius: 16px;
  font-family: Arial;
  color: #ffffff;
  font-size: 28px;
  background: #273664;
  padding: 5px 10px 5px 10px;
  border: solid #7986ae 0px;
  text-decoration: none;
}
 
.btn:hover {
  background: #899DD5;
  text-decoration: none;
}
 
.btn2 {
  -webkit-border-radius: 16;
  -moz-border-radius: 16;
  border-radius: 16px;
  font-family: Arial;
  color: #ffffff;
  font-size: 22px;
  background: #293E7A;
  padding: 5px 10px 5px 10px;
  border: solid #7986ae 0px;
  text-decoration: none;
}
 
.btn2:hover {
  background: #899DD5;
  text-decoration: none;
}
 
 
#sidebar {
  position:absolute;
  top:0px;
  left:0px;
  width:310px;
  height:100vh;
  background:#1a1a1a;
  text-align:center;
  transform-origin:left;
  transform:perspective(1200px) rotateY(90deg);
  transition:all 400ms ease;
}
#sidebar ul li {
  color:#ccc;
  font-size:20px;
  width:100%;
  height:auto;
  border-bottom:1px solid #222222;
  line-height:50px;
  padding: 6px;
}
#sidebar.active {
  transform:perspective(1200px) rotateY(0deg);
}
 
 
 
#toggle-btn {
  position:absolute;
  left:30px;
  top:20px;
  transition:left 200ms linear 0ms,transform 300ms ease 100ms;
  width: auto;
   padding: 25px 25px 25px 25px;
 
 
}
#toggle-btn.active {
  left:310px;
  transform:rotate(0deg);
}
#toggle-btn span {
  position:relative;
  top:0px;
  display:block;
  background:#1a1a1a;
  width:30px;
  height:5px;
  margin:5px 0px;
  cursor:pointer;
  transition:transform 300ms ease 200ms;
}
#toggle-btn.active span:nth-child(1) {
  top:10px;
  transform:rotate(45deg);
}
#toggle-btn.active span:nth-child(2) {
  opacity:0;
}
#toggle-btn.active span:nth-child(3) {
  top:-10px;
  transform:rotate(-45deg);
}
 
 
ul {
   list-style-type: none;
   list-style-image: url("");
    list-style-position: outside;
    }
 
li {
    padding: 0px;
    margin: 0px;
    }
 
a:visited {
    color: none;
}
 
/* mouse over link */
a:hover {
    color: none;
}
 
/* selected link */
a:active {
    color: none;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzerox

Poner 2 funciones en javascript en una pagina web

Publicado por abzerox (106 intervenciones) el 30/11/2017 04:05:16
Hola, el problema esta en que la función contador nunca es llama, ni tampoco esta asociada a la escucha de algun evento en particular. Si simplemente buscas ejecutarla basta simplemente con esto:

1
2
3
4
5
6
function contador(){
	var contador = document.getElementById("contador");
	contador.value = cont;
	cont++;
}
contador(); // Llamo a la función


Ahora bien, si lo que quiere es asociarla a algun evento que es desencadenado por un elemento html, no me queda claro cual seria este elemento, de todas formas podrias hacer algo como esto:

1
2
3
4
5
6
7
8
9
10
function contador(){
	var contador = document.getElementById("contador");
	contador.value = cont;
	cont++;
}
 
tuElementoHTML.addEventListener('evento', contador);
 
tuElementoHTML => Elemento al cual se le asocia el evento
evento => nombre del evento, ejemplo: click, submit, change, keyup, etc.

Nos comentas si es lo que buscabas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Poner 2 funciones en javascript en una pagina web

Publicado por helpme (2 intervenciones) el 04/12/2017 17:10:18
Hola lo que quiero saber como ejecutan 2 scripts a las vez, puede ser con otras fuciones de java script como ejemplo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad