CODEWITHSUNDEEP
javascriptjqueryruby-on-railscoffeescript
Paige Krsnak
Paige Krsnak

Reputation: 11

Clearing textarea breaks other JS functions

I am working on modeling a computer who will converse with a user. The console is able to print a message to the screen and reload with little problem. However, I have a button currently set to 'clear' what is on the computer screen -- once this button is pressed, no other function will work until the page is reloaded.

My work so far. Recreate the problem by pressing either 'pwr' or 'send' a few times. Both buttons print a message to the screen once pressed. If you press 'clear', the screen clears as I'd like it to, but neither button will print a message to the screen anymore. Does .val(' ') somehow make this field uneditable?

# app/assets/javascripts/app.computress.coffee

App.Computress =
    clear: ->
        $("#hm_disp_txt").val('')
    greet: ->
        App.Computress.prints("Welcome!")
    prints: (str) ->
        $("#hm_disp_txt").append(str + "\n")

$(document).on "click", "[data-behavior~=computress-listen]", =>
    App.Computress.prints("ping received")

$(document).on "click", "[data-behavior~=computress-listen-clear]", =>
    App.Computress.clear()

$(document).on "click", "[data-behavior~=computress-power]", =>
    App.Computress.greet()

$(document).on "click", "[data-behavior~=computress-reload]", =>
    location.reload()



# home.html/erb
<div id="computress">
<div id="home_console">
    <textarea id="hm_disp_txt" readonly>Zzzzzz....</textarea>
</div>
    <div id="home_input">
    <div id="hm_inp_txt">></div>
    <input type="text" id="user_inp" placeholder="...say &quot;hello&quot;?">
    <%= link_to "send", "#", data: {behavior: "computress-listen"}, id: "talkbutton", class: "comptrss_mono_txt" %>
    <%= link_to "C", "#", data: {behavior: "computress-listen-clear"}, id: "clearbutton", class: "comptrss_mono_txt" %>
    <%= link_to "pwr", "#", data: {behavior: "computress-power"}, id: "pwrbutton", class: "comptrss_mono_txt" %>
    <%= link_to "reload", "#", data: {behavior: "computress-reload"}, id: "rldbutton", class: "comptrss_mono_txt" %>
    </div>
</div>

Upvotes: 1

Views: 27

Answers (1)

simey.me
simey.me

Reputation: 2207

I believe it's because you're mixing up .append() and .val() ... try using:

$("#hm_disp_txt").val( $("#hm_disp_txt").val() + "\n" + str );

instead of:

$("#hm_disp_txt").append(str + "\n");

in your prints() method

Upvotes: 1

Related Questions