Question

我创建了几个按钮，点击后我想影响最终成本，但不是应该的。按钮有一个值，成本的最终值不起作用，有人能让我知道我做错了吗？

<div class="priceWrapper">
  <h3 class="priceText1" id="total">$0.00</h3>
  <h3 class="priceText2">Final Cost</h3>
</div>

<div class="item">
  <div class="itemProduct">
    <h4 class="itemText">
      <span class="no_selection">Logos</span>
    </h4>
  </div>

  <div class="itemHidden">
    <form action="" id="theForm">

      <label>
        <button class="buttonBg" name="product" value="25.00" type="button">Producto 3</button>
      </label>

      <label>
        <button class="buttonBg" name="product" value="10.00" type="button">Producto 4</button>
      </label>

    </form>
  </div>

{{1}}

但是当我选择一个时，最终价格将不会完美。正在显示不同的号码！有人能帮帮我吗？

Answer 1

将点击事件附加到所有按钮，并在每次点击时添加费用，如下面的代码段所示。

注意：如果您想通过按钮添加一次成本，可以在点击后立即禁用该按钮：

SDL_Texture* tempChar = SDL_CreateTexture(renderer, SDL_PIXELFORMAT_RGBA8888, SDL_TEXTUREACCESS_TARGET, 3, 5);

if (SDL_SetRenderTarget(renderer, tempChar) != 0) {
    cout << "SDL_SetRenderTarget() Error! " << SDL_GetError() << endl;
} else {
    cout << "SDL_SetRenderTarget() success" << endl;
}

if (SDL_RenderClear(renderer) != 0) {
    cout << "SDL_RenderClear() Error! " << SDL_GetError() << endl;
} else {
    cout << "SDL_RenderClear() success" << endl;
}

if (SDL_SetRenderDrawColor(renderer, 255, 0, 0, 255) != 0) {
    cout << "SDL_SetRenderDrawColor() Error! " << SDL_GetError() << endl;
} else {
    cout << "SDL_SetRenderDrawColor() success" << endl;
}

if (SDL_RenderFillRect(renderer, NULL) != 0) {
    cout << "SDL_RenderClear() Error! " << SDL_GetError() << endl;
} else {
    cout << "SDL_RenderClear() success" << endl;
}

int w;
int h;
Uint32 format;
int access;

if (SDL_QueryTexture(tempChar, &format, &access, &w, &h) != 0) {
    cout << "SDL_QueryTexture() ERROR : " << SDL_GetError() << endl;
} else {
    cout << "SDL_QueryTexture() no error" << endl;
}

cout << "width is : " << w << " height is : " << h << endl;

if (access == SDL_TEXTUREACCESS_TARGET) {
    cout << "TARGET" << endl;
}

if (format == SDL_PIXELFORMAT_RGBA8888) {
    cout << "format is : SDL_PIXELFORMAT_RGBA8888" << endl;
}

void* readPixels = NULL;
int pitch;

if (SDL_RenderReadPixels(renderer, NULL, 0, readPixels, pitch) != 0) {//12 pitch, 3x4bytes
    //an error occurred
    cout << "SDL_RenderReadPixels() Error, text probably wont work... :-/\n" << SDL_GetError() << endl;
} else {
    cout << "SDL_RenderReadPixels() success" << endl;
}

cout << "pitch returned : " << pitch << endl;

menuMouse = tempChar;

for (int i = 0; i < 5; i++) {
    cout << "i is : " << i << endl;
    char* rowStart = ((char*) readPixels) + i * pitch;
    cout << "pix data is : " << int(rowStart) << endl;
}

希望这有帮助。

this.setAttribute('disabled','disabled');

var products = document.querySelectorAll(".buttonBg");

for (var i = 0; i < products.length; i++) {
  products[i].addEventListener("click", totalIt);
}

function totalIt() {
  var total      = document.querySelector("#total");
  var currentVal = parseInt( total.innerText );
  var new_val    = parseInt( this.value );
  
  if( this.classList.contains('clicked') ){
    total.innerText = ( currentVal - new_val ).toFixed(2);
  }else{
    total.innerText = ( currentVal + new_val ).toFixed(2);
  }
  
  document.querySelector("#total2").innerText = total.innerText;
  
  this.classList.toggle('clicked');
}

.clicked{
   color: green;
}

Answer 2

我已调整您的代码以使此工作见下文

下面注意我已将ID添加到产品按钮。

<div class="priceWrapper">
  <h3 class="priceText1">$<span id="total">0.00</span></h3>
  <h3 class="priceText2">Final Cost</h3>
</div>

<div class="item">
  <div class="itemProduct">
    <h4 class="itemText">
      <span class="no_selection">Logos</span>
    </h4>
  </div>

  <div class="itemHidden">

    <form action="" id="theForm">

      <label>
        <button class="buttonBg" name="product" value="25.00" type="button">Producto 3</button>                      
      </label>

      <label>
        <button class="buttonBg" name="product" value="10.00" type="button">Producto 4</button>
      </label>

    </form>
  </div>
  <h3 class="priceText1">$<span id="total2">0.00</span></h3>

然后我修改了你的代码

<div class="priceWrapper">
  <h3 class="priceText1" id="total">$0.00</h3>
  <h3 class="priceText2">Final Cost</h3>
</div>

<div class="item">
  <div class="itemProduct">
    <h4 class="itemText">
                        <span class="no_selection">Logos</span>
                    </h4>
  </div>

  <div class="itemHidden">

    <form action="" id="theForm">

      <label>
        <button class="buttonBg" id="product1" name="product" value="25.00" type="button">
          Producto 3
        </button>
      </label>

      <label>
        <button class="buttonBg" id="product2" name="product" value="10.00" type="button">
          Producto 4
        </button>
      </label>

    </form>
  </div>

在这里你可以看到最终结果

https://jsfiddle.net/64v3n1se/

要缩放此项，您可以使用类和循环添加单击处理程序，但为了简单起见，我保持简单。

Answer 3

因为在计算过程中，您将获得所有按钮的值并将其相加，因此无论何时单击按钮，您都会计算按钮值的总和。

就我所知，你现在的思维方式是错误的。

您可以像这样更改html代码和脚本代码。

通过这种方式，我们将按钮的对象传递给函数，并增加函数内的全局总变量。稍后你改变了dom。

var total = 0;
            function totalIt(obj) {
                total = total + parseFloat(obj.value);
                document.querySelector(".priceText1").innerText = "$" + total.toFixed();
            }

并使用

传递html中的按钮对象

<button class="buttonBg" name="product" value="10.00" type="button"  onclick="totalIt(this)">

按钮更改最终成本/价值

3 个答案: