Question

我正在尝试更改按钮URI中的值以输入文本值。

<div class="numcontainer">
    <input required="required" onchange="getNumber()" id="cnt" type="input" name="input" placeholder="ISD">
    <input required="required" onchange="getNumber()" id="wano" type="input" name="input" placeholder="Enter number">
</div>
<button type="submit"  name="gowa" id="btngo"  onclick="location.href='myserver://send?phone=NumberPlaceHolder'">Go!</button>

NumberPlaceHolder：尝试连接两个输入

中的值

JS：

function getNumber() {
    document.getElementById('btngo').href.replace("NumberPlaceHolder",document.getElementById('cnt').value+document.getElementById('wano').value); 
}

它没有按预期工作。我该如何解决这个问题？

Answer 1

按钮不能包含href属性。您需要在此处更改onclick属性：

function getNumber(){
  document.getElementById('btngo').setAttribute("onclick", document.getElementById('btngo').getAttribute("onclick").replace("NumberPlaceHolder", document.getElementById('cnt').value+document.getElementById('wano').value)); 
}

让它像这样拆分总是更好：

function getNumber(){
  curOnclick = document.getElementById('btngo').getAttribute("onclick");
  wanoValue = document.getElementById('cnt').value+document.getElementById('wano').value;
  newOnclick = curOnclick.replace("NumberPlaceHolder", wanoValue);
  document.getElementById('btngo').setAttribute("onclick", newOnclick); 
}

Answer 2

只是一个替代品，它更干净

const getNumber =()=> {
    let val =id=> document.querySelector(id).value
    console.log('myserver://send?phone='+val('#cnt')+val('#wano'))
}
//console or location.href

<div class="numcontainer">
   <input required id="cnt" type="text" placeholder="ISD">
   <input required id="wano" type="number" placeholder="Enter number">
</div>
<input type="button" name="gowa" id="btngo" onclick="getNumber()" value="Go!">

onChange是非常不必要的。

Answer 3

你应该使用简单的

<a href="myserver://send?phone=NumberPlaceHolder"></a>

而不是

<button type="submit" name="gowa" id="btngo" onclick="location.href='myserver://send?phone=NumberPlaceHolder'">Go!</button>

要更改链接，请使用此选项：

document.querySelector('.start a').href = 'my-new-address'

Answer 4

更改您的输入类型，例如type="nummber"或type="text"，以获取号码或仅限文字

<input required="required" onchange="getNumber()" id="cnt" type="nummber" placeholder="ISD">
<input required="required" onchange="getNumber()" id="wano" type="number" placeholder="Enter number">

您可以像这样在按钮上添加点击事件。

function getNumber(){
     document.getElementById("btngo").onclick = function() {
        var ll = "myserver://sendphone="+document.getElementById('cnt').value+document.getElementById('wano').value;
        console.log(ll); // checking url in console.
        location.href = ll;
     };
 }

HTML按钮 - 如何动态更改网址内容

4 个答案: