在href末尾附加变量？

Question

I am trying to generate a twitter stream widget based on the users search. Using their api, it is easy to make one if the search term is known, such as "corgi". Here is my code:

I want to be able to delete "corgi" obviously, and replace it with whatever they search for.

EDIT: After some research online, I believe the solution is a bit more complicated that just appending a variable to the href. Now I am using this:

$(document).ready(function() {

// Upon form submission
$("#formy").submit( function(e) {

    // Stop the <form> from refreshing
    e.preventDefault();

    // Store the user's input
    var id = $('#searchbar').val(); 

    //Make REST call to Twitter API
    $.ajax({
        url: '/search',
        type: 'POST',
        data: {id:id}, 
        dataType: 'text',
        success: function(data) {
            // Redirect to the reults page   
            window.location.href = '/test';
            data = JSON.parse(data);
            //console.log(data);
            // Store data from REST call in local storage
            localStorage.setItem("count", "we analyzed...");
            localStorage.setItem("result1", data.county + " tweets");
            localStorage.setItem("totals", "with a total sentiment score of..");
            localStorage.setItem("result2", data.totalSentiments);
            localStorage.setItem("head",id);
        },

        error: function(jqXHR, textStatus, errorThrown){
            console.log("An error occured.")
            alert(textStatus, errorThrown);
        }
    });
});

// Modify the divs to display the results on the page
jQuery(document).ready(function(){

var id = localStorage.head;
if (localStorage.count) {
    $("#count").text(localStorage.count);
}
if (localStorage.result1) {
    $("#result1").text(localStorage.result1);
}
if (localStorage.totals) {
    $("#totals").text(localStorage.totals);
}
if (localStorage.result2) {
    $("#result2").text(localStorage.result2);
}
if (localStorage.head) {
    $("#head").text("You Searched: " + localStorage.head);
}
localStorage.clear();
//localStorage.removeItem("count");

 window.twttr = (function (d,s,id) {
  console.log("TWITTER  RULES!!!");
      var t, js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
      js.src="https://platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);
      return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
  (document, "script", "twitter-wjs");


twttr.ready(function (twttr) {
  console.log("TWITTER  RULES!!!");
    twttr.widgets.createTimeline(
  '721140436522373121',
  document.getElementById('timeline'),
  {
    width: '400',
    height: '440',
    related: localstorage.head
  }).then(function (el) {
    console.log("Embedded a timeline.")
  });

    });
    }

);








});
});

The issue is, while everything else in the code works fine, the twttr functions simply appear to do nothing. The reason everything is in one function is because I am relying on local storage to store the user input...

Answer 1

This should work. Just set SUBMIT BUTTON ID to the id of the submit button and SEARCH INPUT ID to the id of the user input

$(SUBMIT BUTTON ID).click(function() {
    var htag = $(SEARCH INPUT ID).val();
    $("twitter-timeline").prop("href", "https://twitter.com/hashtag/"+htag);
});