Question

我正在尝试构建一个小应用程序，其中用户输入商店名称，该商店名称将成为图像的替代文本以及他们的商店的URL将成为啊ref，然后将生成一些复制和粘贴代码到在他们的网站上使用。

我遇到的问题是，当尝试使用vanilla JavaScript来读取商店名称的值时，没有显示任何内容。

请看我的小提琴： http://jsfiddle.net/willwebdesigner/gVCcm/

$(document).ready(function() { 

    //  Creates a method and prototype for the Array for splicing up words
    Array.prototype.removeByValue = function(val) {
        for(var i=0; i<this.length; i++) {
            if(this[i] == val) {
                this.splice(i, 1);
                break;
            }
        }
    }

    var myStore = {
        storeName: document.getElementById("storeName").value,
        Url: document.getElementById("yourURL"),
        instructions: "<p>Please copy the code above and paste it into your webpage to display the shop4support logo and a link to your store.</p>",

        blackLogo: function() {
            return "&lt;img src=&quot;https://www.shop4support.com/Resources/home/information/InformationForProviders/Availables4s-bk.jpg&quot; alt=&quot;" + this.storeName + " is available on shop4support&quot; /&gt;";
        }
    }

    $("#urlForm").submit(function(e) {

        // Clear output form first
        $(output).html(' ');
        e.preventDefault();

        // Create an array for conditional statements
        var address = [];
        address = $(myStore.Url).val().split("www");

        // Need to put a conditional in here to detect if https://
        if(address[0] === "https://") {
            $(output)
                .slideDown()
                .prepend("&lt;a href=&quot;"+ $(myStore.Url).val() + "&quot;&gt;" + myStore.blackLogo() + "&lt;/a&gt; ")
                .append(myStore.instructions);

        } else if(address[0] === "http://") {
            // Remove the http part off the URL
            var removeHttp = address;
            removeHttp.removeByValue('http://');
            $(output)
                .slideDown()
                .prepend("&lt;a href=&quot;https://www" + removeHttp + "&quot;&gt;" + myStore.blackLogo() + "&lt;/a&gt; ")
                .append(myStore.instructions);

        } else {
            $(output)
                .slideDown()
                .prepend("&lt;a href=&quot;https://"+ $(myStore.Url).val() + "&quot;&gt;" + myStore.blackLogo() + "&lt;/a&gt; ")
                .append(myStore.instructions);
        }
    });
});

谢谢Will

Answer 1

当您初始化myStore对象时，尚未填充值。您必须在提交时执行此操作。

因此，您可以将var myStore = {}移动到提交回调中：

http://jsfiddle.net/gVCcm/1/

Answer 2

将您的代码更新为：

    $("#urlForm").submit(function(e) {
               myStore.storeName= (document.getElementById("storeName").value);
   /* The rest of your code */
    }

Answer 3

在以下位置初始化myStore变量：

$("#urlForm").submit(function(e) {
 var myStore = {}
});

文本字段中的值不返回任何内容

3 个答案: