在javascript中使用文本框文本

Question

我使用以下腳本使用Twitter小部件 -

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input type="button" value="Run Function" onclick="test();" />   
<script>

function test() {

    new TWTR.Widget({
        version: 3,
        type: 'profile',
        rpp: 8,
        interval: 30000,
        width: 315,
        height: 340,
        theme: {

            shell: {
                background: '#333333',
                color: '#ffffff'


            },
            tweets: {
                background: '#000000',
                color: '#ffffff',
                links: '#4aed05'

            }
        },
        features: {
            scrollbar: false,
            loop: false,
            live: false,
            behavior: 'all'

        }
    }).render().setUser(document.getElementById('TextBox1').value).start();
}

使用函數test(); 在按鈕單擊它正在出現錯誤 -

Error: Unable to get value of the property 'value': object is null or undefined

所以它似乎沒有達到 -

(document.getElementById('TextBox1').value)

如果文本框有值，然后在單擊按鈕上運行腳本，我不確定為什么它為null？

Answer 1

在ASP.NET中指定元素時，如下所示：

<asp:TextBox ID="TextBox1" runat="server">

您最終得到一個輸入框，其ID具有生成的名稱！ 看看你自己，在頁面上查看源代碼，你會看到你的輸入框“TextBox1”實際上有一個看起來像“ctl00_form1_TextBox1”或類似爵士樂的ID。 所以你的getElementById調用當然不會找到任何ID為“TextBox1”的元素 - 因為沒有。 幸運的是，您可以更改此行為。 只需添加“ClientID”屬性，如下所示：

<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static">

有了它，您的輸入框實際上將具有ID“TextBox1”，並且您將能夠以您嘗試的方式獲得它的值。

編輯

因此，上述問題顯然不適用於這個問題。 發生的事情是，推特小部件的東西很奇怪，如果你想使用動態ID，它就會變得很尷尬。

當twitter小部件運行時，它使用document.write（）調用來構造小部件。 因此，如果您的網頁已經存在，document.write將覆蓋該頁面。 我能想到的最好的事情是將它加載到iframe中，然后將iframe中加載的內容復制到頁面上的任何位置。

我試圖動態構建一個iframe頁面，而不是僅僅為了在iframe中加載小部件來創建單獨的頁面。 最后，我想出了下面的內容，它似乎可以在Firefox 13中運行，但在IE 8中不起作用，我還沒有在IE的更高版本中進行測試。 可能會調整此方法，以便將窗口小部件加載到服務器生成的完全獨立的頁面中 - 或者您甚至可以將其加載到iframe中，然后將iframe放在頁面上您希望它出現的位置。

無論如何，在完成所有這些之后，我現在討厭推特小部件。 這完全是愚蠢的。 為什么必須使用document.write？ 為什么它不能很好地構建DOM對象，以便其他孩子也可以玩？ 隨你。 這就是我得到的，我會留下它：

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link href="//widgets.twimg.com/j/2/widget.css" rel="stylesheet" type="text/css">

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<script type="text/javascript" charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/javascript">

    function fn(usr) {
        var ifr = document.createElement("iframe");
        document.body.appendChild(ifr);
        ifr.style.visibility = "hidden";

        ifr.contentWindow.document.write("<script type=\"text/javascript\" charset=\"utf-8\" src=\"http://widgets.twimg.com/j/2/widget.js\"></" + "script>");
        ifr.contentWindow.document.write("<script>" + fn2.toString() + ";</" + "script>");
        ifr.contentWindow.document.write("<script>fn2('" + usr + "')</"+"script>");
        ifr.contentWindow.document.close();

        t = setInterval(function () {
            if (ifr.contentWindow.document.readyState == "complete") {
                clearInterval(t);
                setTimeout(function () {
                    try {
                        var frame_styles = ifr.contentWindow.document.getElementsByTagName("style");
                        for (i = 0; i < frame_styles.length; i++) {
                            var newstyles = document.createElement("style");
                            newstyles.innerHTML = frame_styles[i].innerHTML;
                            document.body.appendChild(newstyles);
                        }
                    } catch (ex) { }

                    document.getElementById("sloc").innerHTML = ifr.contentWindow.document.body.innerHTML;

                }, 1000);
            }
        }, 50);

    }

    function fn2(usr) {
        new TWTR.Widget({
            version: 2,
            type: 'profile',
            rpp: 4,
            interval: 30000,
            width: 250,
            height: 300,
            theme: {
                shell: {
                    background: '#333333',
                    color: '#ffffff'
                },
                tweets: {
                    background: '#000000',
                    color: '#ffffff',
                    links: '#4aed05'
                }
            },
            features: {
                scrollbar: false,
                loop: false,
                live: false,
                behavior: 'all'
            }
        }).render().setUser(usr).start();
    }

</script>

<input type="text" id="txtfield" />
<asp:Button ID="Button1" Text="Click" OnClientClick="fn(document.getElementById('txtfield').value);return false;" runat="server" />
<div id="sloc"></div>

</asp:Content>

Answer 2

我不是.NET的人，但使用TextBox1.Text應該是服務器端代碼，例如ASP.NET。 由於您在JavaScript（客戶端）中使用它，您應該這樣做：

render().setUser(document.getElementById('TextBox1').value).start();