Javascript Generating Text into Textbox?

Question

I wrote this little bit of code but I'm not sure why it's not working? It's supposed to take in the persons name and depending on what they selected it will output a website with their name at the end of it.

JSFiddle http://jsfiddle.net/tQyvp/135/

JavaScript

function generateDynamicSignature() {
    var dynSig = "";
    var user = document.getElementById("usernameInput");
    var e = document.getElementById("scriptListInput");
    var strUser = e.options[e.selectedIndex].text;
    if (strUser == "example") {
        dynSig = "http://example.com/users/";
    }
    document.getElementById("generateSignature").addEventListener('click', function () {
        var text = document.getElementById('dynamicSignatureOutput');
        text.text = (dynSig + user);
    });
}

HTML

<select class="form-control" id="scriptListInput">
                    <option value="example">Example 1</option>
                 </select>

Cameron McCluskie · Accepted Answer · 2016-04-24 02:21:50Z

There are a few problems with your code, I'll try to list them all.

First, you never added the username input to your HTML.

Next, you seem mixed up on the way to access/set the text of an HTML input. You do this through the value field. For the username input, you forgot to access any property, so you'll need to change it to:

var user = document.getElementById("usernameInput").value;

You later used the text property of both the select element and the output. These should also both be value.

Another problem is that you've placed a listener inside a listener. Your outer function, generateDynamicSignature, listens for the onclick event of the button. This function only runs after the button is clicked. But inside this function, you attach a new listener. This inner listener will only run if someone clicks the button twice.

I've included these changes in a new fiddle:

https://jsfiddle.net/zdfnk77u/

JonyD · Accepted Answer · 2016-04-23 23:30:55Z

0

where is usernameInput in your html?
in the if, use === instead of ==

answered Apr 23, 2016 at 23:30

JonyD

1,3754 gold badges22 silver badges38 bronze badges

Comments

user6245342 · Accepted Answer · 2016-04-24 00:16:05Z

0

If and when you add the missing "usernameInput" element in your HTML, all you'll have to do is...

dynSig='http://example.com/users/'+usernameInput.value;

answered Apr 24, 2016 at 0:16

user6245342

1083 bronze badges

Comments

Michael Schwartz · Accepted Answer · 2016-04-24 01:52:35Z

0

I think part of the problem is that you want to access the value and not the text of input elements. So for text and strUser, you want to do text.value instead of text.text and such.

Also, based on the JSfiddle, you probably want to rewrite how you're using the document listener and the onclick of the html element. Every time the button is clicked it goes through the generateDynamicSignature and creates a listener to change the value, but doesn't necessarily change the value itself. If you move the logic of the generate function inside the click listener, that should fix most of your problems.

edited Apr 24, 2016 at 1:52

Michael Schwartz

8,45514 gold badges90 silver badges153 bronze badges

answered Apr 24, 2016 at 0:32

Ben

9898 silver badges18 bronze badges

Comments

Alex Kudryashev · Accepted Answer · 2016-04-24 04:32:36Z

0

You create your generateDynamicSignature inside $(document).ready. There are two approaches.

define function generateDynamicSignature outside $(document).ready

or

bind your button.click to a handler inside $(document).ready

Do not mix these two.

answered Apr 24, 2016 at 4:32

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

Collectives™ on Stack Overflow

Javascript Generating Text into Textbox?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related