粘贴变量值图片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'/>