粘貼變量值圖片src

Question

我有這樣的jQuery/Javascript的代碼

<style type="text/css"> 
    #baseurl{visibility: hidden!important;} 
    #options{visibility: hidden!important;} 
    #key{visibility: hidden!important;} 
    </style> 
    <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script> 
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script> 
    <script language="javascript" type="text/javascript"> 

    $(document).ready(function() { 

    $("#cityoutput").val($.trim($('td.ms-formlabel:contains("City")').siblings(".ms-formbody").text())); 
    $("#stateoutput").val($.trim($('td.ms-formlabel:contains("State")').siblings(".ms-formbody").text())); 

    var cityoutput = $("#cityoutput").val(); 
    var stateoutput = $("#stateoutput").val(); 
    var baseurl = $("#baseurl").val(); 
    var options = $("#options").val(); 
    var key = $("#key").val(); 

    $("#mapbutton").click(function() { 

    alert(baseurl + cityoutput + "," + stateoutput + options + cityoutput + "," + stateoutput + key); 

    }); 

    }); 

    </script> 

    <input disabled="disabled" id="cityoutput" maxlength="255" min="1"/>&#160; 
    <input disabled="disabled" id="stateoutput" maxlength="255" min="1"/> 
    <input id="mapbutton" type="button" value="Show url"/> 
    <input disabled="disabled" id="baseurl" value="https://maps.googleapis.com/maps/api/staticmap?center="/> 
    <input disabled="disabled" id="options" value="&amp;zoom=16&amp;size=600x300&amp;maptype=roadmap&amp;format=png&amp;markers=color:red%7C"/> 
    <input disabled="disabled" id="key" value="xxxxxxxxxxxxxxxx"/> 

在有我需要改變某些事情的警報線。這是爲我建立一個URL，我需要創建一個圖像的URL src =「」。

如何才能粘貼的URL作爲，但只有當我點擊我的按鈕？

我認爲這很簡單，但我不明白。

在此先感謝。

Answer 1

我無法讓你正確，但基於你的代碼，我認爲這是你想要的。

希望這會有所幫助。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style type="text/css"> 
 
    #baseurl{visibility: hidden!important;} 
 
    #options{visibility: hidden!important;} 
 
    #key{visibility: hidden!important;} 
 
    </style> 
 
    <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script> 
 
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script> 
 
    <script language="javascript" type="text/javascript"> 
 

 
    $(document).ready(function() { 
 

 
    $("#cityoutput").val($.trim($('td.ms-formlabel:contains("City")').siblings(".ms-formbody").text())); 
 
    $("#stateoutput").val($.trim($('td.ms-formlabel:contains("State")').siblings(".ms-formbody").text())); 
 

 
    var cityoutput = $("#cityoutput").val(); 
 
    var stateoutput = $("#stateoutput").val(); 
 
    var baseurl = $("#baseurl").val(); 
 
    var options = $("#options").val(); 
 
    var key = $("#key").val(); 
 

 
    $("#mapbutton").click(function() { 
 

 
    alert(baseurl + cityoutput + "," + stateoutput + options + cityoutput + "," + stateoutput + key); 
 

 
    var src_url=baseurl + cityoutput + "," + stateoutput + options + cityoutput + "," + stateoutput + key; 
 
    
 
    //pasting the url in img src 
 
    $("#url_target").attr('src',src_url); 
 

 
    }); 
 

 
    }); 
 

 
    </script> 
 

 
    <input disabled="disabled" id="cityoutput" maxlength="255" min="1"/>&#160; 
 
    <input disabled="disabled" id="stateoutput" maxlength="255" min="1"/> 
 
    <input id="mapbutton" type="button" value="Show url"/> 
 
    <input disabled="disabled" id="baseurl" value="https://maps.googleapis.com/maps/api/staticmap?center="/> 
 
    <input disabled="disabled" id="options" value="&amp;zoom=16&amp;size=600x300&amp;maptype=roadmap&amp;format=png&amp;markers=color:red%7C"/> 
 
    <input disabled="disabled" id="key" value="xxxxxxxxxxxxxxxx"/> 
 
    
 
    <img id='url_target'/>