Combine userinput and predefined phrase into url (to write into dom)-CodePudding

I want to combine userinput from a textfield with a preset url, to then form a new url that is to be written into the dom below after pressing a button

My current code looks like this:

<body>
<form>
    <input type="text" id="pixivurl" value="4165980"/>
    <input type="button" id="btn" value="pixivuserid"/>
</form>
<html>
<script type="text/javascript">
        document.getElementById('btn').onclick = function() {
      var val = document.getElementById('pixivurl').value,
      src = ' val,
      var link = document.getElementById("link");
      var a = document.createElement('a');
      var linkText = document.createTextNode("pixivuser");
      a.appendChild(linkText);
      a.title = "pixivuser";
      a.href = "https://rsshub.app/pixiv/user/"   pixivuser";
      document.body.appendChild(a);
        }
    </script>
</body>
</html>

The base url here is: https://rsshub.app/pixiv/user/

and it is supposed to have a numeral added right after, defined by userinpu. (the default result in this case is https://rsshub.app/pixiv/user/4165980 )

I can't quite figure out the part to combine and then write into the dom below, something might be missing ?

CodePudding user response：

You just have some typing mistakes and then your code will work. The input with the id pixivurl has the user id. And you are getting it and assigning it to the href property of the link element. If you want the url to be also the text of the link element then put it in the textNode you have created.

  <form>
  <input type="text" id="pixivurl" value="4165980"/>
  <input type="button" id="btn" value="pixivuserid"/>
</form>
<script type="text/javascript">
      document.getElementById('btn').onclick = function() {
    var val = document.getElementById('pixivurl').value;
    var url = "https://rsshub.app/pixiv/user/"   val;
    var a = document.createElement('a');
    var linkText = document.createTextNode(url);
    a.appendChild(linkText);
    a.title = "pixivuser";
    a.href = url;
    a.style.display = 'block';
    document.body.appendChild(a);
      }
  </script>