Inkrementieren Wert Feld Problem in woocommerce

Question

Mit dem folgenden Code auf unserer website (mit Wordpress und WooCommerce) in der Datei /woocommerce/templates/global/quantity-input.php befindet, habe ich einige Code hinzugefügt, um mehrere "Increment Value" -Schaltflächen zu haben. Jeder Button soll den Mengenwert um 1 des daneben liegenden Feldes erhöhen.

Das Problem ist, dass alle Schaltflächen nur den ersten oberen Feldwert erhöht.

Ich möchte, dass jede Schaltfläche nur mit dem Feld neben ihm interagieren, ohne auf andere Felder zu reflektieren.

Was mache ich falsch?
Bitte helfen Sie mir.

echo "<script> 
 

 
var i = 0; 
 
    function buttonClick() { 
 
     document.getElementById('inc').value = ++i; 
 
</script>"; 
 

 

 

 

 
if (! defined('ABSPATH')) { 
 
\t exit; // Exit if accessed directly 
 
} 
 
?> 
 
<div class="quantity"> 
 
<form> 
 
\t <input type="number" id="inc" onfocus="if(this.value == '0') { this.value = ''; }" step="<?php echo esc_attr($step); ?>" min="<?php echo esc_attr($min_value); ?>" max="<?php echo esc_attr($max_value); ?>" name="<?php echo esc_attr($input_name); ?>" value="<?php echo esc_attr($input_value); ?>" title="<?php echo esc_attr_x('Qty', 'Product quantity input tooltip', 'woocommerce') ?>" class="input-text qty text" size="4" /> 
 
\t <input type="button" onclick="buttonClick()" value="Increment Value" /> 
 
\t </form> 
 
</div>

Answer 1

Wenn document.getElementById ('inc') genannt wird, wird es den ersten Eingang mit der ID "inc". Also aktualisiert es dieses Eingabefeld. Sie benötigen eine eindeutige ID für die Eingabefelder oder suchen einen anderen Weg, um das richtige Eingabefeld für die Aktualisierung zu finden.

echo "<script> 

var i = 0; 
    function buttonClick(id) { 
     document.getElementById(id).value = ++i; 
</script>"; 




if (! defined('ABSPATH')) { 
    exit; // Exit if accessed directly 
} 
?> 
<div class="quantity"> 
<form> 
    <input type="number" id="inc1" onfocus="if(this.value == '0') { this.value = ''; }" step="<?php echo esc_attr($step); ?>" min="<?php echo esc_attr($min_value); ?>" max="<?php echo esc_attr($max_value); ?>" name="<?php echo esc_attr($input_name); ?>" value="<?php echo esc_attr($input_value); ?>" title="<?php echo esc_attr_x('Qty', 'Product quantity input tooltip', 'woocommerce') ?>" class="input-text qty text" size="4" /> 
    <input type="button" onclick="buttonClick("inc1")" value="Increment Value" /> 
    </form> 
</div> 

Answer 2

Sie brauchen so etwas, ID des Eingangs passieren, während Funktion aufrufen und erhöhen den Wert dieses Eingangs, dessen ID in Funktion übergeben ...

Dies funktioniert, es versuchen ...

.

function buttonClick(id) 
 
{ 
 
\t var val = document.getElementById(id).value; 
 
\t document.getElementById(id).value = ++val; 
 
}

<div class="quantity"> 
 
<form> 
 
\t <input type="number" id="inc_1" onfocus="if(this.value == '0') { this.value = ''; }" class="input-text qty text" size="4" /> 
 
\t <input type="button" onclick="buttonClick('inc_1')" value="Increment Value" /> 
 
\t 
 
\t <input type="number" id="inc_2" onfocus="if(this.value == '0') { this.value = ''; }" class="input-text qty text" size="4" /> 
 
\t <input type="button" onclick="buttonClick('inc_2')" value="Increment Value" /> 
 

 
</form> 
 
</div>