I am making a landingpage that call three JS functions

I am making a landingpage that call three JS functions
I have tried to follow the Codex from WP regarding using js
There is no specific text about usint JS i pages, but I suppose its the same as using JS in a post.
I have created a scripts file :
www/WPSiteCatalog/scripts/scriptfile.js

I have then "registered" it in a child copy of header.php :
<head>

<?php if ( !is_404() ) print_meta_tags( get_the_ID() ); ?>

<script type="text/javascript" src="/scripts/scriptfile.js"></script> <?php add_favicon(); ?>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" ...

My scripts are created and tested in w3school intepreter, so I know that the code is OK there. It is like this :

<h1>My First JavaScript</h1>
<div id="progress">
<div class="percent">
<div class="number">0%</div>
</div>
</div>
Click the button to display the date.
<button onclick="openFacebook()" type="facebook">Share</button>
<button onclick="openTwitter()" type="twitter">Tweet</button>
<button onclick="openSurvey()" type="survey">Do Survey</button>

<p id="demo"></p>

<script>
function updateSkill () {
if( typeof updateSkill.counter == 'undefined' || updateSkill.counter == 3 ) {
updateSkill.counter = 0;
}
var percent = Math.min(Math.round(++updateSkill.counter / 3 * 100), 100);
document.getElementById("demo").innerHTML = percent;
$('.percent').width(percent + '%');
$('.number').text(percent + '%');

}

function openFacebook() {
var w = 580, h = 300, left = (screen.width/2)-(w/2),
top = (screen.height/2)-(h/2);
updateSkill();
if ((screen.width < 480) || (screen.height < 480))
{window.open ('http://www.facebook.com/share.php?u=http://horizonglassworks.com', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);}
else
{window.open ('http://www.facebook.com/share.php?u=http://horizonglassworks.com', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);}
}

function openTwitter() {
var loc = encodeURIComponent('http://horizonglassworks.com'),
title = "Be aware og the NEW Horizon Glassworks in Bali. A Center for Creating Glass Art in South East Asia",
w = 580, h = 300,
left = (screen.width/2)-(w/2),
top = (screen.height/2)-(h/2);
updateSkill();

window.open('http://twitter.com/share?text=' + title + '&url=' + loc, '', 'height=' + h + ', width=' + w + ', top='+top +', left='+ left +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
}

function openSurvey () {
updateSkill();
window.open("http://www.surveymonkey.com/s/VWYY58G","_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=yes, width=800, height=500");
}
</script>

I first create a page and try to use the code as here shown - > Nothing happens.

Then I tried to put the functions in the scriptfile.js as mentioned above and reduced the page to be like this::

<h1>My First JavaScript</h1>
<div id="progress">
<div class="percent">
<div class="number">0%</div>
</div>
</div>
<script type="text/javascript">
<!--
openFacebook();
//--></script>

Just to see if I could use the openFacebook function from the page. Nothing happened.

What have I done wrong?

Can you help me please.

To summarize:
How to use javscrip withi a page. I want to have three functions each triggered by a button. The best if I can use a shortcode button.

I use a theme named Aegaeus from HB

Best egards
Lars

  • flikkeid

    OK Thank you. I have considered that already, but am very confused by all the information about it and am running short of time to figure it all out.

    All documentation is talking about theme developmen etc.t. I have no intentions of digging so deep. I just want to use js that I have tested in an interpreter to work properly, one time, in the page as easily as possible.

    An easy step by step description would be VERY helpful.

    In this particular case. Could you direct me by answering the following?

    1. Where do I put the code of the actual js-functions (was it correct what I did ?)
    2. Where shall I put the registration of these with wp_enqueue_script (in what file? )
    3. How do I use one of these functions in the page ?

    / Lars

  • Alexander

    Hi @flikkeid,

    You're talking about doing your own custom development here. That's pretty much what you're doing by adding this Javascript. So, it may take a bit of time to learn how to do this properly WordPress.

    There really isn't a step by step guide for this. I'd recommend you start by reading some articles on the WordPress codex. They provide plenty of code examples, and if you look under the "Resources" section of an article, it will link to related tutorials.

    To help you get started. Here's what I'd recommend doing.

    1. Create a child theme: http://codex.wordpress.org/Child_Themes

    2. Create a new javascript file in the child theme. You can place it in any folder you like, but it's usually best to match the folder structure of the parent theme if you can.

    3. Create a functions.php file in your child theme.

    4. Register your new javascript file to be loaded. You do this with the wp_enqueue_script function in the functions.php file of your theme.

    This code should help you get started with it. You can find more examples here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    <?php
    
    function my_scripts_method() {
    	wp_enqueue_script(
    		'custom-script',
    		get_stylesheet_directory_uri() . '/js/custom_script.js',
    		array()
    	);
    }
    
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.