JavaScript - 如何将用户输入值分配给脚本内的变量

Question

使用来自 Social Mention 的小部件脚本--http://socialmention.com/tools/--。尝试通过添加输入框进行修改，以允许用户更改社交媒体主题（var smSearchPhrase）。我创建了一个函数 [smSearch()] 来检索用户数据 (smTopic)，将其分配给一个新变量 (var newTopic)，然后将该值分配给 var smSearchPhrase。分配不工作。

该函数似乎根据通过警报观察到的值起作用，但是，我无法弄清楚如何将 var newTopic 中的值分配给脚本内的 var smSearchPhrase。我通过在函数中放置脚本进行了实验，但这也不起作用。任何帮助表示赞赏。

如果我未能提供所有必要信息，请告知。感谢您的帮助。

HTML：

<form>
   <label for="smTopic">Enter topic:</label>
   <input type="text" id="smTopic">
   <button onclick="smSearch()">Submit</button>
   <input type="reset">
</form>

功能：（包括检查值的警报）

function smSearch(){ 
   var newTopic=document.getElementById("smTopic").value;
       if(newTopic === ""){
          alert("Please enter new social media topic.");                                                  
       }else{
          alert("New topic: " + newTopic);
          smSearchPhrase = newTopic; 
          alert("Value of smSearchPhrase: " + smSearchPhrase);
}

脚本：var smSearchPhrase in original 已赋值，例如var smSearchPhrase = '社交提及';

    <script type="text/javascript"> 
      // search phrase (replace this)
      var smSearchPhrase;
      // title (optional)
      var smTitle = 'Realtime Buzz';
      // items per page
      var smItemsPerPage = 7;
      // show or hide user profile images
      var smShowUserImages = true;
      // widget font size in pixels
      var smFontSize = 11;
      // height of the widget
      var smWidgetHeight = 800;
      // sources (optional, comment out for "all")
      //var smSources = ['twitter', 'facebook', 'googleblog', 'identica'];
    </script>
    <script type="text/javascript" language="javascript" src="http://socialmention.s3.amazonaws.com/buzz_widget/buzz.js"></script>

Answer 1

我认为您的表单正在提交回后端，您需要通过在 onsubmit 中返回 false 或取消事件来阻止表单这样做。

所以这应该有效：

<form onsubmit="return smSearch();">
   <label for="smTopic">Enter topic:</label>
   <input type="text" id="smTopic">
   <button>Submit</button>
   <input type="reset">
</form>

并在您的 JavaScript 中返回 false：

function smSearch(){ 
       var newTopic=document.getElementById("smTopic").value;
       if(newTopic === ""){
          alert("Please enter new social media topic.");                                                  
       }else{
          alert("New topic: " + newTopic);
          smSearchPhrase = newTopic; 
          alert("Value of smSearchPhrase: " + smSearchPhrase);
       }
       return false;
}

我个人会在事件参数上使用 preventDefault() （此处未显示），但仅当您还包含像 jQuery 这样的 JavaScript 库时，它才适用于所有浏览器，因为某些版本的 IE 在事件上使用气泡属性或东西。