名前hrefユーザテキストに応じたラベル入力JavaScript

Question

私のアプリでは、ユーザにカテゴリを追加させています。各カテゴリは、ユーザがカテゴリの名前として入力したラベル付きの単純なhrefです。私が抱えている問題はカテゴリ名が表示されていることです（未定義です）。だから私はどこに問題があるのか​​分からない。また、カテゴリを追加してもう一度クリックすると、以前に作成されたものが消えます！

var boxName="type here"; 
 
var inputt = document.getElementById("boxName").value; 
 
function addInput() 
 
{ 
 
    // var boxName="type here"; 
 

 
document.getElementById('responce').innerHTML='<br/><input type="text" id="'+boxName+'" value="'+boxName+'" /><input type="button" onclick="addlinking()" value="Add"/><span id="Adding"></span>'; 
 
var inputt = document.getElementById("boxName").value; 
 
addlinking(inputt); 
 

 
} 
 
function addlinking(tt){ 
 
    document.getElementById('Adding').innerHTML = '<br/><input type="submit" onclick="addinghref()" value="'+tt+'"><i class="fa fa-angle-right"></i></a><span id="Linking"></span>'; 
 
    
 
} 
 
function addinghref() 
 
{ 
 

 
    document.getElementById('Linking').innerHTML='<a href="http://google.com"></a>'; 
 
}

<input type="button" onclick="addInput()" value="Add Category"> 
 
         <span id="responce"></span>

Answer 1

var catTemplate = document.getElementById("adding-template") 
 
          .content 
 
          .querySelector(".category"); 
 
var createCatDiv = document.getElementById('create-cat'); 
 
var createCatInput = createCatDiv.querySelector("input[type=text]"); 
 

 
function addInput() 
 
{ 
 
    // Clear previous entry. 
 
    createCatInput.value = ""; 
 
    // Show the div. 
 
    createCatDiv.classList.remove("hidden"); 
 
} 
 

 
function addlinking() 
 
{ 
 
    // Hide the create cat div. 
 
    createCatDiv.classList.add("hidden"); 
 
    // Import the category div from the template. 
 
    var catDiv = document.importNode(catTemplate, true); 
 
    document.getElementById("response").appendChild(catDiv); 
 
    // Set the input. 
 
    var input = catDiv.querySelector("input"); 
 
    input.value = createCatInput.value; 
 
    // Replace duckduckgo by the address of your link. 
 
    input.onclick = location.assign.bind(location, "https://duckduckgo.com"); 
 
}

#create-cat { 
 
    margin-top: 1em; 
 
} 
 
#create-cat.hidden { 
 
    display: none; 
 
} 
 
.category{ 
 
    margin-top: 1em; 
 
} 
 
.category input[type=button] { 
 
    background-color: lightblue; 
 
    border-style: solid; 
 
    border-color: gray; 
 
    border-width: 1px; 
 
    border-radius: 5px; 
 
} 
 
.category input[type=button]:hover { 
 
    background-color: blue; 
 
    color: white; 
 
    border-color: black; 
 
} 
 
.category input[type=button]:active { 
 
    background-color: black; 
 
    color: white; 
 
    border-color: black; 
 
}

<template id="adding-template"> 
 
    <div class="category"> 
 
    <input type="button" /> 
 
    </div> 
 
</template> 
 

 
<input type="button" onclick="addInput()" value="Add Category"> 
 
<div id="response"></div> 
 
<div id="create-cat" class="hidden"> 
 
    <input type="text" placeholder="type here" /> 
 
    <input type="button" onclick="addlinking()" value="Add"/> 
 
</div>

Answer 2

var boxName = "type here"; 
 

 
var id = boxName.replace(/\s/g, '_'); 
 

 
function addInput() { 
 
    document.getElementById('responce').innerHTML = '<br/><input type="text" id="' + id + '" value="' + boxName + '" /><input type="button" onclick="addlinking()" value="Add"/><span id="Adding"></span>'; 
 
} 
 

 
function addlinking(tt) { 
 
    var inputt = document.getElementById(id).value; 
 
    document.getElementById('Adding').innerHTML = '<br/><input type="submit" onclick="addinghref()" value="' + inputt + '"><i class="fa fa-angle-right"></i></a><span id="Linking"></span>'; 
 
} 
 

 
function addinghref() { 
 
    document.getElementById('Linking').innerHTML = '<a href="http://google.com">Link</a>'; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 

 

 
<input type="button" onclick="addInput()" value="Add Category"> 
 
<span id="responce"></span>