javascript將文本拆分成單詞列表，然后動態添加到div，將表單標簽弄亂

Question

我正在asp.net網絡表單中測試此代碼，因為我希望將文本拆分為列表或javascript中的單詞，並將每個單詞添加到自己的div中。

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_split

但是，在asp.net Web表單中，僅示例代碼會產生奇怪的行為，並且結果出現和消失。 只需將表單標簽添加到在線示例即可重現該行為。

<form id="form1" runat="server">

</form>

是否有解決此問題或其他想法的方法，可在javascript中完成？

謝謝

Answer 1

因為按鈕觸發了回發到服務器，所以您正在發生的行為。 實質上，這將重新加載頁面，這就是為什么它看起來好像文本出現然后立即消失的原因。

您可以通過添加return false;來解決此問題return false; 在onclick="myfunction()"如下所示：

<form id="form1" runat="server">
    <p>Click the button to display the array values after the split.</p>

    <button onclick="myFunction();return false;">Try it</button>

    <p id="demo"></p>

    <script>
        function myFunction() {
            var str = "How are you doing today?";
            var res = str.split(" ");
            document.getElementById("demo").innerHTML = res;
        }
    </script>
</form>

但是，我不建議使用onclick屬性調用JavaScript函數，因為有更好的方法可以執行此操作。 就您的示例而言，我提供了最簡單的解決方案，但我想提醒您，有更好的方法來解決此問題。

Answer 2

作為霍華德·雷諾萊特對表單行為的解釋的擴展：

<button>元素具有不同的types 。 W3Schools提到“不同的瀏覽器可能對元素使用不同的默認類型”。

在表單中時， submit和reset類型實際上將對表單起作用！ 為了將按鈕放入表單而不提交表單，請將類型設置為button ：

<form>
  <button type="button">Yay, I won't submit this form!</button>
</form>