Name href Beschriftung nach Benutzer Texteingabe JavaScript

Question

In meiner App lasse ich den Benutzer Kategorien hinzufügen. Jede Kategorie ist eine einfache href mit Label, die der Benutzer als Name der Kategorie eingegeben hat. Das Problem, das ich habe, ist der Name der Kategorie wird angezeigt (undefiniert). Ich bin mir also nicht sicher, wo das Problem liegt. Wenn ich erneut auf Kategorie hinzufügen klicke, verschwindet die zuvor erstellte Kategorie!

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>