如何更改基于单击的文本而不更改它，除非页面刷新

Question

i'm really new in javascript and php.. i have a case..

<label><a href="#" class="pull-right" style="margin-top: -5px;" id="moreupload">
                                                    <!--<?php
                                                        $count = substr_count($html,'<div class="col-md-12 row" style="margin-top:10px;">'); //where $html holds your piece of HTML.
                                                        if ($count>=0){
                                                            echo "Add Design";}
                                                        else{
                                                            echo "Upload Design";
                                                        }
                                                        ?>-->
                                                    Upload Design</a></label>

so i want to change the "upload design" text based on user click..so if user click => 1 it change to "add design" without refreshing the page.. any idea how? sorry for my bad English

</div>

Answer 1

You can add a click event to moreupload by getting it by getElementById('moreupload'). And after that you can change it's innerHTML like following:

document.getElementById('moreupload').addEventListener('click', function() {
    // Change the text
    this.innerHTML = 'Add Design'
});

<label>
   <a href="#" class="pull-right" style="margin-top: -5px;" id="moreupload">
    <!--<?php
        $count = substr_count($html,'<div class="col-md-12 row" style="margin-top:10px;">'); //where $html holds your piece of HTML.
        if ($count>=0){
            echo "Add Design";}
        else{
            echo "Upload Design";
        }
        ?>
    -->
    Upload Design
   </a>
</label>

hope it helps

</div>