<div >
                    <button  name="left" type="button" value="less"> << <p ></p></button>
                    <button  name="right" type="button" value="more"> >> <p ></p></button>
                </div>

let table = 1;
let $arrowButton = $('.arrow:button');
    $arrowButton.on('click', function(e){
        e.preventDefault();
        let $leftRight;
        //$($leftRight).text('');
        let arrowClick = $(this).attr("value"); 
        
        switch (arrowClick) {
            case 'less':
                table--;
                $leftRight = $('.before');
                break;
            case 'more':
                table  ;
                $leftRight = $('.after');
                break;
        }
        let $addToArrow = $('<p>'   table   '</p>');
        $($leftRight).append($addToArrow);
        
        $arrowButton.on('mouseout', function() {
            $($leftRight).text('');
        });
    });

Must be a simple answer that I'm clearly missing but I'm trying to replace the text inside the arrow button every time it is clicked. The table is decremented/incremented depending on the left/right arrow clicked and then it should show that text replacing the previous text.

CodePudding user response：

Just try to clear the value before you append the new value.

In this case for example:

 $($leftRight).empty().append($addToArrow);

CodePudding user response：

As the comments mentioned, you just replace using .html(). However, I saw a few ways to optimize your code. Instead of using an actual input attribute value on a non-input, better to use datasets. Also, you can put the increment value in that dataset to make it easier to increment the variable table. Additionally, you can chain your listeners in jQuery, which makes for more consolidated, easier to read code.

More about datasets

let table = 1;
$('.arrow:button').click(function(e) {
  e.preventDefault();
  table  =  $(this).data('value')
  $(this).find('div').html(`<p>${table}</p>`);
}).mouseout(function() {
  $(this).find('div').text('');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <button  name="left" type="button" data-value="-1"> << <div></div></button>
  <button  name="right" type="button" data-value="1"> >> <div></div></button>
</div>

CodePudding user response：

In your question you state:

and then it should show that text replacing the previous text.

Yet you are using "append" here:

$($leftRight).append($addToArrow);

It looks like you want to use "html" here instead, which will set the content of the element specified and thus overwrites (or replaces) existing content in it, like so:

$($leftRight).html($addToArrow);

Other notes:

1. If you want the table count to be displayed on the same line as "<<" or ">>" instead of below, you could use html spans (<span></span>) instead of paragraphs (<p></p>).
2. You can presumably omit the paragraph in the following line: let $addToArrow = $('<p>' table '</p>'); because you are inserting it inside a paragraph (with either the class "before" or "after") already. It then becomes let $addToArrow = $(table); which means we might as well omit that line altogether and do the following to save a variable: $($leftRight).html(table);