2

estoy estudiando por mi cuenta en crear plugins y estoy creando uno que facilita el cambio del footer, lo que pasa es que me genera un error, me sale el siguiente error: Uncaught TypeError: Cannot read property 'setAttribute' of undefined at HTMLDocument

He buscado por todas partes el error pero no lo encuentro, les dejo el código por si alguno llega a saber la manera de solucionarlo, gracias de antemano(por cierto, una vez terminado el plugin será gratuito y podrán ver el código totalmente abierto en Github para todo el que quiera verlo)

<?php
/*
Plugin Name: Footerdit
Plugin URI: diweb.website
Description: Editing the footer text
Version: 1.0
Author: Liam Redes
Author URI: diweb.website
License: GPLv2
*/

register_activation_hook(__FILE__, 'default_options');

function default_options()
{
  if (get_option('class') == false)
  {
    add_option('class', 'footer_text');
  }
}

function menu()
{
  $page = add_option_page('Footerdit', 'Footerdit', 'manage_options', 'Footerdit-conf', 'process_page');
}

add_action('admin_menu', 'menu');

function genarate_page()
{
  $code_pa = get_option('class');
  ?>

  <div class="wrap">
    <h2>Footerdit</h2>
    <form action="admin_post.php" method="post">
      <input type="hidden" name="action" value="save">

      <?php wp_nonce_field('token'); ?>

      <input type="text" name="" placeholder="Enter the name class of your footer" value="<<?php echo esc_html($code); ?>">
      <input type="text" name="" placeholder="Enter the new Footer Text" value="<<?php echo esc_html($code); ?>">
      <input type="submit" name="Save" value="Save">
    </form>
  </div>
  <?php
}
  add_action('admin_post', 'save');

  function save()
  {
    if(!current_user_can('manage_options'))
    {
      wp_die('Not Allowed');
    }

    check_admin_referrer('token');

    $code = sanitize_text_field($POST['code']);

    update_option('account', $code);

    wp_redirect(add_query_arg('page', 'Footerdit-conf', admin_url('option-general.php')));
    exit;
  }

  echo '<script type="text/javascript">'
   , 'document.addEventListener("DOMContentLoaded", () => {'
   , ' var footer_text = document.getElementsByClassName("powered-by")[0];'
   , 'footer_text.setAttribute("id", "footer_text");'
   , 'footer_text_id = document.getElementById("footer_text");'
   . 'footer_text_id.innerHTML = "<p> Nuevo contenido </p>";'
   , '});'
   , '</script>';
?>
11
  • ¿Acaso en tu contexto se está creando algún elemento con la clase powered-by? Todo indica que NO. Si crees que sí se genera ese elemento dinos dónde se genera, al menos en el plugin no ocurre.
    – A. Cedano
    Commented el 5 ago. 2021 a las 5:28
  • Se genera automáticamente via wordpress, el index ya incluye ese elemento, anteriormente tuve el mismo problema por eso utilice la carga después del DOM, pero ahora ni siquiera lo toma ya con el código avanzado Commented el 5 ago. 2021 a las 5:35
  • El hecho es que debe existir un elemento con esa clase sí o sí, el cómo depende de ti, puedes por ejemplo intentar agregar el script en el footer con algo como esto: add_action('wp_footer', 'footer_script'); Y crear una función donde metas el script que te está dando problema: function footer_script () { //pasas aquí toda la parte echo del script que te está dando error } Eso hará que el script se inserte en el footer, suponiendo que el elemento que dices se inserta en el body o en una parte que se carga antes del footer.
    – A. Cedano
    Commented el 5 ago. 2021 a las 5:42
  • El problema viene con que no me toma el setAttribute(), ya que me dice que no está definido, pero ya está definido y en el código he puesto para que busque cuyo elemento luego de haberse cargado por completo el DOM Commented el 5 ago. 2021 a las 5:50
  • Voy a probar añadiendo el add_action que propusiste y te digo si me funciona Commented el 5 ago. 2021 a las 5:50

1 respuesta 1

1

El elemento que tendría la clase powered-by que intentas seleccionar parece no estar cargado cuando se ejecuta este trozo de código:

  echo '<script type="text/javascript">'
   , 'document.addEventListener("DOMContentLoaded", () => {'
   , ' var footer_text = document.getElementsByClassName("powered-by")[0];'
   , 'footer_text.setAttribute("id", "footer_text");'
   , 'footer_text_id = document.getElementById("footer_text");'
   . 'footer_text_id.innerHTML = "<p> Nuevo contenido </p>";'
   , '});'
   , '</script>';

Coloca el script dentro de una función que te asegure que el código se ejecutará cuando el elemento en cuestión ya esté cargado.

Si el elemento se encuentra en el body o en el head puedes indicar al plugin que esa parte del código se ejecute en footer por ejemplo usando el hook wp_footer.

Sería algo así más o menos:

add_action('wp_footer', 'footer_script');

function footer_script () {
      echo '<script type="text/javascript">'
       , 'document.addEventListener("DOMContentLoaded", () => {'
       , ' var footer_text = document.getElementsByClassName("powered-by")[0];'
       , 'footer_text.setAttribute("id", "footer_text");'
       , 'footer_text_id = document.getElementById("footer_text");'
       . 'footer_text_id.innerHTML = "<p> Nuevo contenido </p>";'
       , '});'
       , '</script>';
}

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.