コードの汎用性を高めたい

Question

前提・実現したいこと

ど素人です。
入力フォームの値を受け取って、テンプレートのURLと合成し、HTML上に表示するプログラムを書いています。
より汎用性の高いコードに書き換えたいのですが、思い浮かびません。
アドバイスいただけたら幸いです。

発生している問題・エラーメッセージ

ベタ打ちになっており、汎用性が低い

該当のソースコード

//合成素材のURL
const tempUrl = "http://～";

//合成URLの表示する場所の指定
let output = document.getElementById('output')

//入力された値を受け取る
const input = document.querySelector('input').value;

//クリックイベントのボタン定義
const btn = document.querySelector('button')

//URLを合成する
function createUrl(){
    output.innerHTML = `<a href = ${tempUrl}hoge${input}&Index=0>Result</a>`
}
//合成URLをクリック時に表示する
btn.addEventListener("click", createUrl);

試したこと

補足情報（FW/ツールのバージョンなど）

jQueryは使わない記法で表現したいです。

Comments

[gentaro]

目的のわからない汎用性の向上なんて過剰設計以外の何物でもありませんが、どのような意図で汎用性を向上させようとしているんでしょうか。
ユースケースの想定ができないと何を共通化すればよいのか等、判断ができませんが。

[m.ts10806]

>jQueryは使わない記法で表現したいです。

むしろjQuery離れも進んでるし今回のコードレベルでは大して短くなりません。「要件、用途次第」という回答にしかなりませんよ。

Answer 1

「今書かれているコードの、どの機能を汎用的に使いたいか」によって汎用化のやりかたは変わるので回答できません。
1つの案としてcreateUrl()で作成するリンクのリンク先を引数で指定できるようにするということが考えられますが、それが本当に正しい汎用化なのかは、質問者さんが今後そのような汎用化が役立つ修正を行うかによります。