如何使内部HTML显示在表单框下方

Question

如何使.innerHTML显示在输入表单下方的元素上？ 现在，当我单击一个选项并单击“提交”时，单选选项本身会弹出“喜欢的电台”的网址。 这是第二种形式。 我希望内部html显示在以下形式下，内部html应显示他们从第二种形式中选择的喜爱电台的网址。 到目前为止，它确实显示了url，但内部html不在表单下方显示了它，而是在表单内部显示了它。 请帮助。

 <script type="text/javascript"> function radio() { var theMix = document.getElementById('mix'); var theDrive = document.getElementById('drive'); var theCountry = document.getElementById('country'); if (document.getElementById("mix").checked) { document.querySelector("label[for=mix]").innerHTML = "https://wtmx.com/"; } else if (document.getElementById("drive").checked) { document.querySelector("label[for=drive]").innerHTML = "https://wdrv.com/"; } else if (document.getElementById("country").checked) { document.querySelector("label[for=country]").innerHTML = "https://us99.radio.com/"; } } </script> <form> <p>List all the stations you listen to <br> <input type="checkbox" name="option1" value="A">The mix 101.9 <br> <input type="checkbox" name="option2" value="B">The Drive 97.1 <br> <input type="checkbox" name="option3" value="C">US 99 Country 99.5 <br> </p> </form> <form> <p>What is your favorite station?</p> <input type="radio" name="stations" id="mix" value="A"> <label for="mix">The Mix 101.9</label><br> <input type="radio" name="stations" id="drive" value="B"> <label for="drive">The Drive 97.1</label><br> <input type="radio" name="stations" id="country" value="C"> <label for="country">US 99 Country 99.5 </label><br> <input type="button" value="Link To Favorite Station" onclick="radio()"> </form> 

Answer 1

<label for="country">

document.querySelector("label[for=country]").innerHTML = "https://us99.radio.com/";

这就是您要尝试使用该代码更改的元素。 如果要在其他地方使用该值，请在所需的位置创建一个元素。

    <div id="put_label_here">
</form>

document.getElementById("put_label_here").innerHTML = "Your Text";

更新：为了回答您的问题，我创建了一支笔： https : //codepen.io/anon/pen/mopgbL

我不确定您要问什么，因此我在这里添加了两种可能性：

function updateLinkValue(e){
  document.getElementById("link").value = e.target.value;
  document.getElementById("anchor").innerHTML = '<a href="' + 
  e.target.value + '" target="_blank">' + e.target.value + '</a>';
}

第一位更新按钮的值，第二位将锚标记添加到“ anchor”跨度中。 锚点将按原样工作，该按钮需要一些额外的代码：

document.getElementById("link").addEventListener("click", function(e){
  if(e.target.value != "Link To Favorite Station")
  window.open(e.target.value);
});

这两个变量中的变量“ e”都代表事件，在我们的例子中，它拉动“点击”事件。 event.target提取被单击的元素。