Question

我正在尝试从图像的href中的输入表单中获取URL。它不适用于onkeyup。谁知道这里有什么问题？这是我正在使用的代码：

//Twitter

function addtwitter()
 {
var twitter = document.getElementById("twitter");
var s =twitter.value;

document.getElementById("twimg").style.display= "inline";
document.getElementById("tw").href= s;
}

//LinkedIn

function addlinkedin()
 {
var linkedin = document.getElementById("linkedin");
var s =linkedin.value;

document.getElementById("limg").style.display= "inline";
document.getElementById("li").href= s;
}

<form>
<div><label>Your Twitter Url:</label></div>
        <input class="inline" id="twitter" type="text" name="twitter" onKeyup="addtwitter()">
        <br>
        <div><label>Your LinkedIn Url:</label></div>
        <input class="inline" id="linkedin" type="text" name="linkedin" onKeyup="addlinkedin()">
        <br>
</form>
<br>
<div>
<span id="tw" href="#"><img id="twimg" border="0" src="http://image000.flaticon.com/icons/svg/145/145812.svg" width="25" height="25" alt="Twitter" style="vertical-align: middle"></span>
<span id="li" href="#"><img id="limg" border="0" src="http://image000.flaticon.com/icons/svg/145/145807.svg" width="25" height="25" alt="LinkedIn" style="vertical-align: middle;"></span>
</div>

Answer 1

href是一个属性，需要使用setAttribute函数进行设置。请在下面找到更正后的代码：

//Twitter
function addtwitter()
{
  var twitter = document.getElementById("twitter");
  var s =twitter.value;
  document.getElementById("twimg").style.display= "inline";
  document.getElementById("tw").setAttribute('href',s);
}
//LinkedIn
function addlinkedin()
{
  var linkedin = document.getElementById("linkedin");
  var s =linkedin.value;
  document.getElementById("li").setAttribute('href',s);
  document.getElementById("limg").style.display= "inline";
}

希望这有帮助！

Answer 2

您应该使用setAttribute（）函数来设置href值，但是span不会表现为链接。
尽管使用 span ，您可以使用锚标记，或者您可以在范围中使用锚标记。以下是修改后的代码

建议：在 oblur 事件中调用 addtwitter（）和 addlinkdin（）函数。

＆＃13;
＆＃13;
<form> <div><label>Your Twitter Url:</label></div> <input class="inline" id="twitter" type="text" name="twitter" onblur="addtwitter()"> <br> <div><label>Your LinkedIn Url:</label></div> <input class="inline" id="linkedin" type="text" name="linkedin" onblur="addlinkedin()"> <br> </form> <br> <div> <a id="tw" href="#"><span><img id="twimg" border="0" src="http://image000.flaticon.com/icons/svg/145/145812.svg" width="25" height="25" alt="Twitter" style="vertical-align: middle"></span></a> <a id="li" href="#"><span><img id="limg" border="0" src="http://image000.flaticon.com/icons/svg/145/145807.svg" width="25" height="25" alt="LinkedIn" style="vertical-align: middle;"></span></a> </div>
＆＃13;
＆＃13;
＆＃13;

如何从输入字段中隐藏图像？

2 个答案: