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

Question

I am trying to change values in a button's URI to input texts values.

<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 : Trying to concatenate values enter in both input

JS:

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

It does not work as expected. How can I solve this?

Answer 1

You cannot have a href attribute for a button. You need to change the onclick attribute here:

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

It's always better to have it split like this:

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

Just an alternative, it's cleaner

 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 is quite unnecessary.

Answer 3

You should use simple

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

instead of

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

To change link use this:

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

Answer 4

Change your input type like this type="nummber" or type="text" for getting number or text only

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

You can add click event to your button like this.

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;
     };
 }