Cannot get the html part working with javascript in functions.php child theme

  • jillyspence

    (@jillyspence)


    4 years, 7 months ago

    Hi, I cannot seem to get my code output to display on the wordpress page.
    I am trying to put this simple pop up box to display, and then a greeting when client clicks on it.
    I have put the following code in functions.php file:

    <?php

function childtheme_parent_styles() {
 wp_enqueue_style( 'parent', get_template_directory_uri().'css/style.css' );
function mytheme_files() {
 wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());
}

add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

wp_register_script('twentythirteen',get_stylesheet_directory_url().'/js/custom.js');

add_action(
'wp_enqueue_scripts',
'twentythirteen_enqueue_scripts' );
add_action( 'wp_footer', mytheme_add_button_html' );
}

function mytheme_enqueue_scripts() {
if( is_page(18) ) {
wp_enqueue_script( 'twentythirteen',
get_stylesheet_directory_uri() .
"/js/custom.js', array{
'( ). '1.0.0' , false );
function mytheme_add_scripts() {?>

<div id="button-container">
 '<input type="button" onclick="Alert">'Click here!'?></button></div>' 
}

    My javascript code is in a file called custom.js in the js folder:

    <SCRIPT LANGUAGE="Javascript">
 var greet = "Hooray!"; 
	 document.write(greet);
 
</script>
Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator bcworkz

    (@bcworkz)

    4 years, 7 months ago

    .js files cannot contain HTML tags. Straight JavaScript only. Remove the script tags to create a valid .js file.

    document.write() should then work, but the output may occur in a strange place that’s not readily visible. What is often done is an empty element exists by default on a page. JS then can set this element’s inner HTML as appropriate. Then you’re assured the JS string will be visible where you want it to be.

    You should also wrap your code in a ‘DOMContentLoaded’ or other appropriate event listener callback to ensure the target element exists in the document before your code executes.

    What you have is fine as a proof of concept to ensure you’ve correctly enqueued, but you’ll want to implement these feature soon afterwards.

    Thread Starter jillyspence

    (@jillyspence)

    4 years, 7 months ago

    Thanks. I took the script tags out, but still does not work.
    I tried wrapping it in a dom element, but not sure if I am doing this right, as still does not display.

    document.addEventListener('DOMContentLoaded', () => {
            let btn = document.getElementById('btn');
            btn.addEventListener('click', () => {
                // handle the click event
                console.log('clicked');

var greet = "Hooray!"; 
	 document.write(greet);

    });

    Also tried this:

    function Alert() {
    document.getElementById(“demo”).innerHTML = “Hooray.”;

    });

    Moderator bcworkz

    (@bcworkz)

    4 years, 7 months ago

    An alert box or console log is a good way to verify if your code even executes since it doesn’t affect the page nor depend on the DOM to work.

    alert('Hello world!');
console.log('Hello world!');

    Taking a closer look at the PHP you posted, it superficially looks OK, but you have some syntax errors– mismatched quotes and curly braces. Using a code editor that offers syntax highlighting and delimiter matching (for chars like {}[]””” etc.) will help you avoid these issues. Defining WP_DEBUG as true when you’re coding will let PHP notify you when it encounters errors so you can investigate further. Just don’t leave it as true for very long on a production site, it adds a slight security risk.

    Thread Starter jillyspence

    (@jillyspence)

    4 years, 7 months ago

    No, still does not execute with alert(‘Hello world!’ );
    console.log(‘Hello world! );

    Moderator bcworkz

    (@bcworkz)

    4 years, 7 months ago

    Your JS is not executing because the enqueuing failed due to PHP syntax errors. If you think you’ve corrected those and you’ve defined WP_DEBUG as true and see no error messages, maybe it’s time to post the most recent version of your code, both PHP and JS, for further evaluation.

    Thread Starter jillyspence

    (@jillyspence)

    4 years, 7 months ago

    Thanks, I will do that, just trying to figure out how to define WP_DEBUG as true.
    Do I have to download and edit wp_config.php file for this. I do not have an FTP account from a hosting company for this, as I do not have a live site.
    Wordpress is on my computer with local by flywheel. (not xampp)
    Do I just edit the file with notepad++ as I read somewhere that I should not edit the original file.
    I have put the code in notepad++ to look for syntax errors, but it does not seem to show any, maybe I am doing something wrong there.

    Thread Starter jillyspence

    (@jillyspence)

    4 years, 7 months ago

    I apologise, my question about FTP has just been answered.

    mark l chaves

    (@mlchaves)

    4 years, 7 months ago

    Hey @jillyspence,

    As @bcworkz mentioned, there are syntax errors in your PHP code. See the screen capture.

    View post on imgur.com

    1) Line 17 has a missing beginning single quote (').

    2) Line 25 has a mismatching pair of quotes.

    3) Line 25 starts an array with a left curly bracket instead of a left paren bracket.

    Those are just for starters. I think there are more.

    I think you should:

    1) Start out with a minimal working example. There are many working examples online for you. Here’s one.

    
// Use a code snippets plugin or child theme functions.php file.
add_action( 'wp_head', function() { ?>
<script>

	/* write your JavaScript code here */
	console.log( 'Hello, World!');

</script>
<?php } );

    2) Add your code bit by bit and test each time. The last bit you added before your code breaks is usually the culprit.

    3) Think about using a code snippet plugin instead of a child theme’s functions.php file. I’ve worked for 3 different plugin companies and we always recommend this to our customers. I hardly use a child theme let alone a functions.php file myself these days.

    Good luck!

    • This reply was modified 4 years, 7 months ago by mark l chaves. Reason: Typo
    Thread Starter jillyspence

    (@jillyspence)

    4 years, 7 months ago

    Thanks for your help. I just wanted to use a functions.php file, because I heard that too many plugins slow your site down.

    mark l chaves

    (@mlchaves)

    4 years, 6 months ago

    Hey @jillyspence,

    My pleasure.

    I just wanted to use a functions.php file, because I heard that too many plugins slow your site down.

    Understood. That’s a pretty general statement (i.e., what is too many plugins?). It also depends on the quality of the plugins you use. It only takes one poorly designed plugin to mess things up 😉

    Anyway, if you know you aren’t going to write many filters and your child theme’s functions.php is rock solid, then knock yourself out.

    BTW, the plugin I use to manage my code snippets does 1 DB query on the front end that takes 0.0007s right now. Just an FYI.

    Cheers!

    • This reply was modified 4 years, 6 months ago by mark l chaves. Reason: Typo
Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Cannot get the html part working with javascript in functions.php child theme’ is closed to new replies.