PHP doesn't call a jQuery function

Question

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>

As a side note, PHP and JavaScript will never interact directly. The PHP is executed on the server. The result (typically HTML but it could also be JavaScript, a JPEG or any other file type) is sent to the browser. The browser then executes the JavaScript. — Josef Engelfrost
– Josef Engelfrost, Commented Sep 27, 2015 at 13:28

Pranav C Balan · Accepted Answer · 2015-09-27 11:17:55Z

1

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);
}

answered Sep 27, 2015 at 11:17

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anonymous Over a year ago

Well that was a dumb mistake. Thank you very much, Pranav.

Pranav C Balan Over a year ago

@anonymous : glad to help

Collectives™ on Stack Overflow

PHP doesn't call a jQuery function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related