使用 Javascript 通过表单将预定义的字符串添加到用户输入中

Question

我最近开始学习Javascript来帮助我工作，我不禁认为我已经咬掉了比我能咀嚼的更多的东西。

理念：
使用表单，获取一条输入的信息，用预定义的值前缀和后缀信息，并将其输出到文本区域，以便我可以复制/使用它。

出于某种原因，到目前为止，我发现学习javascript特别困难，我放在一起的代码确实可以工作，正是我想要的，但我忍不住认为我拼凑的代码非常草率。

表格

<form name="invalidateForm"  action="">
Image Name:<br /><input id="imageName" type="text" name="imageName" value=""><br />
<input class="btn" type="button" onclick="invalidateUrls()" value="Generate URLs">
<input class="btn" type="reset"><br />           
<textarea id="icdnResults"></textarea>
</form>

JavaScript

<script type="text/javascript">
function invalidateUrls()
{
var txt = "";
document.getElementById("icdnResults").value = "";
if (document.getElementById("imageName").value != ""){
txt = "";
//Category Thumbnails
txt += "prefix text";
txt += document.getElementById("imageName").value;
txt += "suffix textn";
//Product Page Main Image
txt += "prefix text 2";
txt += document.getElementById("imageName").value;
txt += "suffix text 2n";
//Flyout image on product page
txt += "prefix text 3";
txt += document.getElementById("imageName").value;
txt += "suffix text 3n";
//Product page thumbnails
txt += "prefix text 4";
txt += document.getElementById("imageName").value;
txt += "suffix text 4n";
document.getElementById("icdnResults").value += txt;
}
}
</script>

我 99% 确定我所做的比草率更进一步，我也猜测它丝毫没有"未来证明"。

我应该更多地使用和定义变量，还是有完全不同的方法？

如果有人能说出我是否走在正确的轨道上，或者我是否应该完全放弃它，那将不胜感激。

谢谢:)亚历克斯
编辑
我向任何读到这篇文章的人道歉，似乎我没有正确解释，忘记提到一件关键的事情;前缀和后缀都有 4 个不同的字符串。因此，用户将在输入字段中输入一个值，它将用 4 个不同的值作为前缀，并用 4 个不同的值作为后缀。

http://www.somedomain.com/folder/?fmy=<<USER_INPUT>>&type=etc
http://www.somedomain.com/folder/?someCmd=<<USER_INPUT>>&layer=etc
http://www.somedomain.com/folder/?itemId=<<USER_INPUT>>&value=etc
http://www.somedomain.com/folder/?pageR=<<USER_INPUT>>&caption=etc

因此，其中"？"有4个

不同的值，其中"&"也有4个完全不同的值。

编辑 2
好的，根据约翰的回复...我稍微调整了一下。它看起来如何？只是我第一次尝试更改代码的垃圾？

var processForm = function(){
var value = $('#imageName').val(),
    outputElement = $('#icdnResults'),
    html = '',
    s_imageTag = function(size){
        return size + value;
    },
    e_imageTag = function(size2){
        return size2 + "n";
    },
   size = ['s_catThumb', 's_productMain'], 
   size2 = ['e_catThumb', 'e_productMain'];
html += s_imageTag('s_catThumb ');
html += e_imageTag(' e_catThumb');
html += s_imageTag('s_productMain '); 
html += e_imageTag(' e_productMain'); 
outputElement.val(html);
};
$(function(){
$('#gen').on('click', processForm);
});

Answer 1

如上所述，但不使用额外的库。JQuery 很棒，如果你要做很多 JavaScript，你可能会发现它更容易使用。但是，如果您不想添加对其他库的依赖，则可以使用vanilla JS完成相同的操作：

http://jsfiddle.net/4GtFe/1/

.HTML

<form name="invalidateForm" action="">Image Name:<br />
    <input id="imageName" type="text" name="imageName" value=""><br />
    <input class="btn" type="button" value="Generate URLs" id="gen">
    <input class="btn" type="reset"><br />
    <textarea id="icdnResults"></textarea>
</form>

.JS

var processForm = function () {
    var value = document.getElementById('imageName').value,
        html = '',
        imageTag = function (size) {
            return 'prefix ' + size + ' <<' + value + '>> suffix ' + size + "n";
        },
        sizes = ['text', 'text 2', 'text 3'];

    for (var i = 0; i < sizes.length; i++) {
        html += imageTag(sizes[i]);
    }
    document.getElementById('icdnResults').value = html;
};
document.getElementById('gen').addEventListener('click', function() {
    processForm();
}, false);

正如我的回答和上面的答案所示;在可能的情况下使用不显眼的javascript是一种很好的做法。这将使代码保持干净，并提高可读性和可维护性。

此外，如果您希望支持 Internet Explorer 8 及更早版本，则需要将 addEventListener 替换为处理其支持的函数，请参阅此帖子 Internet Explorer 中的 addEventListener。

Answer 2

也许是这种事情？

http://jsfiddle.net/nvLx9/2/

.HTML

<input id="user_input" type="text" placeholder="User Input" value="test">
<button id="process" type="button">Process</button>
<br>
<textarea id="output" row="4" cols="60" style="height:60px"></textarea>
<div id="images">
</div>

.JS

var getLinks = function(value){
        var links = [
                'http://placehold.it/100x100/ff0000&text=<<USER_INPUT>>',
                'http://placehold.it/100x100/0000ff&text=<<USER_INPUT>>',
                'http://placehold.it/100x100/00ff00&text=<<USER_INPUT>>',
                'http://placehold.it/100x100/ff00ff&text=<<USER_INPUT>>',
            ];
            $.each(links, function(idx, link){
                links[idx] = link.replace('<<USER_INPUT>>', value);
            });
            return links;
    },
    processForm = function(){
        var value = $('#user_input').val(),
            links = getLinks(value),
            getText = function(){
                var h = '';
                $.each(links, function(idx, link){
                    h += link + "n";
                });
                return h;
            },
            addImages = function(){
                var h = '';
                $.each(links, function(idx, link){
                    h += '<img src="'+link+'">';
                });
                $('#images').html(h);
            };
        $('#output').val(getText());
        addImages();
    };
$('#process').on('click', processForm);