使用Javascript使用表单向用户输入添加预定义字符串

我最近开始学习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>

---

也许是这样的事情

HTML

过程

JS

var getLinks=函数（值）{
变量链接=[
'http://placehold.it/100x100/ff0000&text=',
'http://placehold.it/100x100/0000ff&text=',
'http://placehold.it/100x100/00ff00&text=',
'http://placehold.it/100x100/ff00ff&text=',
];
$.each（链接，函数（idx，链接）{
links[idx]=link.replace（“”，值）；
});
返回链接；
},
processForm=函数（）{
var值=$（'#用户输入'）.val（），
links=getLinks（值），
getText=function（）{
var h=''；
$.each（链接，函数（idx，链接）{
h+=链接+“\n”；
});
返回h；
},
addImages=函数（）{
var h=''；
$.each（链接，函数（idx，链接）{
h+=''；
});
$（'#images'）.html（h）；
};
$（'#output'）.val（getText（））；
addImages（）；
};
$（“#进程”）。在（'click'，processForm'）；

如上所述，但不使用附加库。非常好，如果你打算使用大量JavaScript，你可能会发现它更容易使用。但是，如果您不想在附加库上添加依赖项，那么可以使用vanilla JS来实现这一点：

HTML

图像名称：

JS

var processForm=函数（）{
var value=document.getElementById（'imageName'）。value，
html=“”，
imageTag=函数（大小）{
返回“前缀”+size+“后缀”+size+“\n”；
},
大小=['text'、'text 2'、'text 3']；
对于（变量i=0；i

如我的答案和上面的答案所示；在可能的情况下使用是一种良好的做法。这将保持代码的整洁，提高可读性和可维护性

---

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

嗨，John，谢谢您回答我的问题。首先，我道歉——我没有正确地问我的问题。我刚刚更新了它。因为前缀和后缀各有4个不同的值，我认为我必须创建一个新函数，这对吗？所以

imageTag2=function（size2）{定义所有值}

然后

html+=imageTag（'Cat Thumb'）；+imageTag2（“猫拇指后缀”）

？还是说我一点意义都没有呢？谢谢你的代码示例和关于不引人注目的javascript的信息——只要我有了更好的基本理解，就可以阅读这些信息了。该页面将只在Chrome中使用，因此IE没有问题。再次感谢Jonathan！亚历克斯：我已经修改了我的答案，以符合你修改后的问题。这样更好吗？

<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 text\n";

//Product Page Main Image
txt += "prefix text 2";
txt += document.getElementById("imageName").value;
txt += "suffix text 2\n";

//Flyout image on product page
txt += "prefix text 3";
txt += document.getElementById("imageName").value;
txt += "suffix text 3\n";

//Product page thumbnails
txt += "prefix text 4";
txt += document.getElementById("imageName").value;
txt += "suffix text 4\n";

document.getElementById("icdnResults").value += txt;
}
}
</script>

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

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);
});

<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>

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);

<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>

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);