javascript - 在 WP 中回显 JS 内的文本

Question

我有以下代码:

  var led = <?php echo get_field('why_led'); ?>;
  var optics = <?php echo get_field('why_led'); ?>;
  var ledil = <?php echo get_field('why_led'); ?>;

  function toLED() {
    document.getElementById("change-box").innerHTML = "<p class='small'>" + led + "</p>";
    document.getElementById("p-button").style.backgroundColor = "yellow";
    document.getElementById("p-button").style.color = "black";

    document.getElementById("p-button2").style.backgroundColor = "black";
    document.getElementById("p-button2").style.color = "white";
    document.getElementById("p-button3").style.backgroundColor = "black";
    document.getElementById("p-button3").style.color = "white";
}

对于第二个和第三个文本框还有两种方法。问题是，我似乎找不到真正回显文本的方法。我只是在 PHP 的函数未定义和语法错误之间徘徊。

我想从 ACF 字段“why_led”获取文本，然后将其回显到 JS 框并将其保存到变量中。

Answer 1

选项一:将变量放入 func

  function toLED() {
    var led = "<?php echo get_field('why_led'); ?>";
    var optics = "<?php echo get_field('why_led'); ?>";
    var ledil = "<?php echo get_field('why_led'); ?>";

    document.getElementById("change-box").innerHTML = "<p class='small'>" + led + "</p>";
    document.getElementById("p-button").style.backgroundColor = "yellow";
    document.getElementById("p-button").style.color = "black";

    document.getElementById("p-button2").style.backgroundColor = "black";
    document.getElementById("p-button2").style.color = "white";
    document.getElementById("p-button3").style.backgroundColor = "black";
    document.getElementById("p-button3").style.color = "white";
}

选项二:将它们分配给窗口

  window.led = "<?php echo get_field('why_led'); ?>";
  window.optics = "<?php echo get_field('why_led'); ?>";
  window.ledil = "<?php echo get_field('why_led'); ?>";

  function toLED() {

    document.getElementById("change-box").innerHTML = "<p class='small'>" + window.led + "</p>";
    document.getElementById("p-button").style.backgroundColor = "yellow";
    document.getElementById("p-button").style.color = "black";

    document.getElementById("p-button2").style.backgroundColor = "black";
    document.getElementById("p-button2").style.color = "white";
    document.getElementById("p-button3").style.backgroundColor = "black";
    document.getElementById("p-button3").style.color = "white";
   }