Как я могу нажать кнопку и добавить или минус значение с помощью функции (Svelte) - PullRequest
Новая
       6

Как я могу нажать кнопку и добавить или минус значение с помощью функции (Svelte)

0 голосов
/ 11 февраля 2020

Я новичок ie с Svelte. Я написал функции для увеличения и уменьшения значения в текстовом поле при нажатии кнопки + и -. Но я пытаюсь нажимать кнопки + и -, но это не ответ ничего. Пожалуйста, помогите мне. Этот код ниже: 

<script>
    var name;
    var count = {
        cetiya : 0,
        other : 0
    };
    function addNumPray(name) {
        console.log(name);
        if (name == "a") {
            count.cetiya += 1;
        } else {
            count.other += 1;
        }
    }

    function minusNumPray(name) {
        console.log(name);
        if (name == "a") {
            count.cetiya -= 1;
        } else {
            count.other -= 1;
        }
    }
</script>



<div>
    <button on:click={minusNumPray("a")}>-</button>
  <input type="text" name="numPrayAtCetiya" size="7" bind:value={count.cetiya}>
  <button on:click={addNumPray("a")}>+</button>
</div>
<div>
    <button on:click={minusNumPray("b")}>-</button>
  <input type="text" name="numPrayAtOther" size="7" bind:value={count.other}>
  <button on:click={addNumPray("b")}>+</button>
</div>

Ответы [ 3 ]

1 голос
/ 11 февраля 2020

В вашем on: click вы должны написать функцию, вместо этого у вас есть вызов функции, который будет запущен при рендеринге, а его результат будет сохранен в событии click. Для запуска функции правильный путь будет:

<button on:click={() => addNumPrary("b")}>+</button>

0 голосов
/ 11 февраля 2020

А потом, если я хочу предупредить, когда сумма счета (четия + другое) достигнет 10, как я могу это сделать. Этот код не работает. 

<script>
    var name;
    var count = {
        cetiya : 0,
        other : 0,
        sum : count.cetiya + count.other
    };

      $: if(count.sum >= 10) {
            alert('count can't over 10);
        }

    function addNumPray(name) {
        console.log(name);
        if (name == "cetiya") {
            count.cetiya += 1;
        } else {
            count.other += 1;
        }
    }

    function minusNumPray(name) {
        console.log(name);
        if (name == "cetiya") {
            count.cetiya -= 1;
        } else {
            count.other -= 1;
        }
    }
</script>

<div>
    <button on:click={() => minusNumPray("cetiya")}>-</button>
  <input type="text" name="numPrayAtCetiya" size="7" bind:value={count.cetiya}>
  <button on:click={() => addNumPray("cetiya")}>+</button>
</div>
<div>
    <button on:click={() => minusNumPray("other")}>-</button>
  <input type="text" name="numPrayAtOther" size="7" bind:value={count.other}>
  <button on:click={() => addNumPray("other")}>+</button>
</div>
0 голосов
/ 11 февраля 2020

Используйте функции стрелок для вызова функций с параметром 

<script>
    var name;
    var count = {
        cetiya : 0,
        other : 0
    };
    function addNumPray(name) {
        console.log(name);
        if (name == "a") {
            count.cetiya += 1;
        } else {
            count.other += 1;
        }
    }

    function minusNumPray(name) {
        console.log(name);
        if (name == "a") {
            count.cetiya -= 1;
        } else {
            count.other -= 1;
        }
    }
</script>



<div>
    <button on:click={() => minusNumPray("a")}>-</button>
  <input type="text" name="numPrayAtCetiya" size="7" bind:value={count.cetiya}>
  <button on:click={() => addNumPray("a")}>+</button>
</div>
<div>
    <button on:click={() => minusNumPray("b")}>-</button>
  <input type="text" name="numPrayAtOther" size="7" bind:value={count.other}>
  <button on:click={() => addNumPray("b")}>+</button>
</div>
...