我无法使用 .innerHTML 更新价格答案

【问题标题】：I can't update prices using .innerHTML我无法使用 .innerHTML 更新价格
【发布时间】：2012-10-02 00:29:24
【问题描述】：

我无法自动更新价格。

制作唯一的ID；对于我使用的价格：

id="target_1_<?php echo $product['product_id']; ?>"

对于我使用的选择菜单：

id="select_<?php echo $product['product_id']; ?>"

这里是html/php

<?php foreach ($products as $product) { ?>
   <span id="target_1_<?php echo $product['product_id']; ?>"><?php echo $product['price']; ?></span>
 <?php } ?>


<?php if ($product['options']) { ?>
  <?php foreach ($product['options'] as $option) { ?>
  <?php if ($option['type'] == 'select') { ?>

  <select name="option[<?php echo $option['product_option_id']; ?>]" class="select_options" id="select_<?php echo $product['product_id']; ?>" onchange="getIt(this);">

  <?php foreach ($option['option_value'] as $option_value) { ?>
    <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>

     <?php if ($option_value['price']) { ?>
    (<?php echo $option_value['price_prefix']; ?><span id="newPrice"><?php echo $option_value['price']; ?></span>)
    <?php } ?>
    </option>
    <?php } ?>
  </select>
<?php } ?>

........
<?php } ?>

然后对于 onchange 函数我使用这个：

function getIt(el) {
var a = el.options[el.selectedIndex].text;
var position1 = a.indexOf("(");
var position2 = a.indexOf(")");
var position1 = position1+2
var finalA = a.substring(position1, position2); 
document.getElementById("target_1_<?php echo $product['product_id']; ?>").innerHTML = "$"+finalA;
}

alert(finalA) 给出了我需要的值，但我似乎无法将它恢复到 DOM 中

【问题讨论】：

通过警报检查 "target_1_<?php echo $product['product_id']; ?>" 的值
JavaScript 无法执行 PHP 代码。尝试不使用 PHP 的 ID 系统

标签： php javascript innerhtml getelementbyid

【解决方案1】：

改变这两个：在 getIt 函数中传递 product_id

  <select name="option[<?php echo $option['product_option_id']; ?>]" class="select_options" id="select_<?php echo $product['product_id']; ?>" onchange="getIt(this,<?php echo $product['product_id']; ?>);">

使用 id 和 productid 参数连接而不是使用 php

function getIt(el, productid) {
var a = el.options[el.selectedIndex].text;
var position1 = a.indexOf("(");
var position2 = a.indexOf(")");
var position1 = position1+2
var finalA = a.substring(position1, position2); 
document.getElementById("target_1_"+productid).innerHTML = "$"+finalA;
}

【讨论】：

【解决方案2】：

试试这个：

function getIt(el) {
var a = el.options[el.selectedIndex].text;
var position1 = a.indexOf("(");
var position2 = a.indexOf(")");
var position1 = position1+2; //BTW , Your forgot ; over here
var product_id = <?php echo $product['product_id']; ?>;
//You always can use: console.log(product_id);
//Then check your browser's console to see this variable value
//In this case , just View Source and make sure that instead of the php line there's a valid
// number (the product's id)
var finalA = a.substring(position1, position2); 
document.getElementById("target_1_"+product_id).innerHTML = "$"+finalA;
}

【讨论】：

【解决方案3】：

在选择标签中为产品 ID 添加额外的数据属性，例如 data-product-id

<select name="option[<?php echo $option['product_option_id']; ?>]"  
  data-product-id = "target_1_<?php echo $product['product_id']; ?>" 
  class="select_options" id="select_<?php echo $product['product_id']; ?>" 
   onchange="getIt(this);">

在 Javascript 中

function getIt(e) {
    //Your part
    document.getElementById(e.getAttribute("data-product-id")).innerHTML = "$"+finalA;
}

【讨论】：