CODEWITHSUNDEEP
javascriptjquery
anonymous
anonymous

Reputation: 75

PHP doesn't call a jQuery function

I'm trying to replace the text from the div id="texto" but it isn't working.

The idea I had in mind was that when I click the button, pag1() function would replace the text from "texto" with the var pag1 from application.js.

It doesn't do anything at all, which is confusing.

Here are both files:

index.php

<html>    
    <head>
        <!-- Meta -->
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <meta name="keywords" content="Luis, Almerich, De Haro, Luis Almerich, Almerich de Haro, Estudihac, Siroppe, Publicidad, CEU, Valencia" lang="es" />
        <meta name="description" content="Luis Almerich de Haro, publicista." />
        <meta name="author" content="Abraham Menéndez" />
        <!-- UTF-8, mime -->
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        <!-- Letra para texto común, cambiar por Garamond. -->
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
        <!-- Letra para textbox del nombre. -->
        <link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
        <!-- Se adapta, no se puede aumentar ni disminuir -->
        <meta name='viewport' content='user-scalable=0'>
        <!-- jQuery 2 -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        <!-- Scripts -->
        <script src="application.js" type="text/javascript"></script>

        <!-- CSS -->
        <link href="styles.css" media="screen" rel="stylesheet" type="text/css" />

        <!-- Titulo de la página -->
        <title> Página de Luis </title>

        <!-- Init -->
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                application_init();
            });   
        </script>
    </head>

    <body>
        <div id="container">
            <div id="content">
                <form action="">
                    <div id="texto">
                        Cargando...
                        <NOSCRIPT>
                            Javascript desactivado.
                        </NOSCRIPT>
                        <input type="button" value="This is a button" onclick="pag1();"/>
                    </div>
                </form>
            </div>
        </div>
    </body>

</html>

application.js

var p1 = "<p>Esto es la página 1.</p>";
var p2 = "<p>Esto es la página 2.</p>";
var p3 = "<p>Esto es la página 3.</p>";

/* Init.*/
function application_init() {
    "use strict";
    window.alert("It's working!");
}

function pag1() {
    "use strict";
    document.getElementById("texto").html(p1);
}

Here is the "live web version":

<http://www.luisalmerich.com>

Upvotes: 1

Views: 31

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115272

You need to use innerHTML for setting html content in javascript

function pag1() {
  "use strict";
  document.getElementById("texto").innerHTML = p1;
}

You can use html() for jQuery object

function pag1() {
  "use strict";
  $("#texto").html(p1);
}

Upvotes: 1

Related Questions