javascript - Do I just put the html in a page when enqueueng or do I also have to reference js file from the html page

admin管理员组

文章数量:1287636

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 3 years ago.

Improve this question

I am trying to get my javascript to work in my page, but I have always just put the html on the actual page, but now am wondering if I am supposed to put the <script src before the html as well to make the code work in order to reference the javascript. I have enqueued everything, the js and css from the functions.php Here it is:

<script src='/wp-content/themes/twentythirteen-child/js/myscript.js)

<div id="clockContainer">

<div id="hour"></div>

<div id="minute"></div>

<div id="second"></div>

</div>

here is the code in the functions.php:

function childtheme_parent_styles() {
    wp_enqueue_style('parent', get_template_directory_uri().'/css/style.css' );
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());
    wp_register_script('main-js', get_stylesheet_directory_uri() . '/js/main.js');
    if( is_page(507) ) {
        wp_enqueue_script( 'main-js');
    }
}

add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

and here the javascript in main.js in js folder

console.log('executing scripts.js');

setInterval(() => {
    d = new Date(); //object of date()
    hr = d.getHours();
    min = d.getMinutes();
    sec = d.getSeconds();
    hr_rotation = 30 * hr + min / 2; //converting current time
    min_rotation = 6 * min;
    sec_rotation = 6 * sec;
 
    hour.style.transform = `rotate(${hr_rotation}deg)`;
    minute.style.transform = `rotate(${min_rotation}deg)`;
    second.style.transform = `rotate(${sec_rotation}deg)`;
}, 1000);

    

css: in style.css file

#clockContainer {
    position: relative;
    margin: auto;
    height: 40vw;
    /*to make the height and width responsive*/
    width: 40vw;
    background: url(clock.png) no-repeat;
    /*setting our background image*/
    background-size: 100%;
}
  
#hour,
#minute,
#second {
    position: absolute;
    background: black;
    border-radius: 10px;
    transform-origin: bottom;
}
  
#hour {
    width: 1.8%;
    height: 25%;
    top: 25%;
    left: 48.85%;
    opacity: 0.8;
}
  
#minute {
    width: 1.6%;
    height: 30%;
    top: 19%;
    left: 48.9%;
    opacity: 0.8;
}
  
#second {
    width: 1%;
    height: 40%;
    top: 9%;
    left: 49.25%;
    opacity: 0.8;
}

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 3 years ago.

Improve this question

I am trying to get my javascript to work in my page, but I have always just put the html on the actual page, but now am wondering if I am supposed to put the <script src before the html as well to make the code work in order to reference the javascript. I have enqueued everything, the js and css from the functions.php Here it is:

<script src='https://artandleatherspencer.local/wp-content/themes/twentythirteen-child/js/myscript.js)

<div id="clockContainer">

<div id="hour"></div>

<div id="minute"></div>

<div id="second"></div>

</div>

here is the code in the functions.php:

function childtheme_parent_styles() {
    wp_enqueue_style('parent', get_template_directory_uri().'/css/style.css' );
    wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());
    wp_register_script('main-js', get_stylesheet_directory_uri() . '/js/main.js');
    if( is_page(507) ) {
        wp_enqueue_script( 'main-js');
    }
}

add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

and here the javascript in main.js in js folder

console.log('executing scripts.js');

setInterval(() => {
    d = new Date(); //object of date()
    hr = d.getHours();
    min = d.getMinutes();
    sec = d.getSeconds();
    hr_rotation = 30 * hr + min / 2; //converting current time
    min_rotation = 6 * min;
    sec_rotation = 6 * sec;
 
    hour.style.transform = `rotate(${hr_rotation}deg)`;
    minute.style.transform = `rotate(${min_rotation}deg)`;
    second.style.transform = `rotate(${sec_rotation}deg)`;
}, 1000);

    

css: in style.css file

#clockContainer {
    position: relative;
    margin: auto;
    height: 40vw;
    /*to make the height and width responsive*/
    width: 40vw;
    background: url(clock.png) no-repeat;
    /*setting our background image*/
    background-size: 100%;
}
  
#hour,
#minute,
#second {
    position: absolute;
    background: black;
    border-radius: 10px;
    transform-origin: bottom;
}
  
#hour {
    width: 1.8%;
    height: 25%;
    top: 25%;
    left: 48.85%;
    opacity: 0.8;
}
  
#minute {
    width: 1.6%;
    height: 30%;
    top: 19%;
    left: 48.9%;
    opacity: 0.8;
}
  
#second {
    width: 1%;
    height: 40%;
    top: 9%;
    left: 49.25%;
    opacity: 0.8;
}

• javascript
• html
• wp-enqueue-script

Share Improve this question edited Sep 21, 2021 at 6:28 Jacob Peattie 44.1k1010 gold badges5050 silver badges6464 bronze badges asked Sep 21, 2021 at 6:14 Spencer HalsteadSpencer Halstead 1566 bronze badges 1

• 1 Your JavaScript code doesn't define what hour, minute, or second are. You need to assign them to elements in the DOM. This is a purely JavaScript issue and best asked at stackoverflow, if you're not sure what to do. – Jacob Peattie Commented Sep 21, 2021 at 6:29

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

When you enqueue a script with wp_enqueue_script() it adds the <script> tag part for you. If you have HTML that the script interacts with you will need to add that HTML to the page another way. You should not include the script tag in any HTML.

There are many options for adding HTML to a page, depending on where you need it:

• Adding it in the Text tab of the classic editor.
• Adding it with the Custom HTML block in the block editor.
• Creating your own block.
• Creating a shortcode.
• Creating a widget.
• Adding it to a custom page template.

Although I'd say that anything other than using a block is becoming obsolete at this point.

本文标签：