event - on click javascript link
la función de JavaScript no funciona cuando se hace clic en el enlace (4)
Este es un error de sintaxis. Se requieren paréntesis sin importar los parámetros de la función. Sin embargo, es una buena práctica colocar etiquetas de script en la parte inferior de la etiqueta del cuerpo .
Tengo una página bastante simple con una barra lateral de navegación y un iFrame para cargar contenido.
Quiero cambiar el contenido del iFrame haciendo clic en los enlaces en la barra lateral de navegación. Estoy usando el javascript para cambiar la fuente (.src) del elemento document.element.
He leído numerosos artículos (StackOverflow) y el código debería funcionar, pero simplemente no.
El siguiente código es la página html que he creado e incluye el JS en una etiqueta.
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function getContent{
document.getElementById("contentFrame").src="LoremIpsum.html";
}
</script>
</head>
<body>
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
<li>Configuration Guides</li>
<li>API Guides</li>
<li><a href="" onclick=''getContent()''> LoremIpsum</a></li>
</ul>
<!-- <button onclick="getContent()">Lorem Ipsum</button> -->
</div>
<iframe class="content" id="contentFrame" src="dummy.html">
</iframe>
</body>
Puede usar javascript: void (0).
<a href="javascript:void(0)" onclick=''getContent(event)''> LoremIpsum</a>
O devuelve false en javascript
<script type="text/javascript">
function getContent(){
document.getElementById("contentFrame").src="LoremIpsum.html";
return false;
}
</script>
Su problema fue que olvidó agregar
()
después del nombre de su función.
Más allá de eso, hay algunas otras cosas para corregir:
No use atributos de eventos HTML en línea (
onclick
,
onmouseover
, etc.) ya que:
- Cree un "código de espagueti" que sea difícil de leer y depurar.
- Conducir a la duplicación de código.
- No escales bien
- No siga la metodología de desarrollo de separación de preocupaciones .
-
Cree funciones de contenedor globales anónimas alrededor de sus valores de atributo que alteren
thisenlace en sus funciones de devolución de llamada. - No sigas el estándar del evento W3C .
- Puede causar pérdidas de memoria en IE .
En su lugar, haga todo su trabajo en JavaScript y use
.addEventListener()
para configurar controladores de eventos.
No use un hipervínculo cuando lo haga un botón (o algún otro elemento).
Si utiliza un hipervínculo, debe deshabilitar su deseo nativo de navegar, lo que se hace estableciendo el atributo
href
en
#
, no
""
.
// Place this code into a <script> element that goes just before the closing body tag (</body>).
// Get a reference to the button and the iframe
var btn = document.getElementById("btnChangeSrc");
var iFrame = document.getElementById("contentFrame");
// Set up a click event handler for the button
btn.addEventListener("click", getContent);
function getContent() {
console.log("Old source was: " + iFrame.src);
iFrame.src="LoremIpsum.html";
console.log("New source is: " + iFrame.src);
}
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
<li>Configuration Guides</li>
<li>API Guides</li>
</ul>
<button id="btnChangeSrc">Change Source</button>
</div>
<iframe class="content" id="contentFrame" src="dummy.html"></iframe>
Tiene un error de sintaxis en su declaración de función (falta paréntesis):
function getContent {
document.getElementById("contentFrame").src="LoremIpsum.html";
}
Debiera ser:
function getContent() {
document.getElementById("contentFrame").src="LoremIpsum.html";
}
También debe evitar el evento predeterminado para el enlace
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function getContent(event) {
event.preventDefault();
document.getElementById("contentFrame").src="LoremIpsum.html";
}
</script>
</head>
<body>
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
<li>Configuration Guides</li>
<li>API Guides</li>
<li><a href="#" onclick=''getContent(event)''> LoremIpsum</a></li>
</ul>
<!-- <button onclick="getContent()">Lorem Ipsum</button> -->
</div>
<iframe class="content" id="contentFrame" src="dummy.html">
</iframe>
</body>