根据用户文本输入JavaScript命名href标签

debugcn 发表于 Dev

塔尔内姆

在我的应用中，我让用户添加类别。每个类别都是一个简单的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>

昆汀·罗伊（Quentin Roy）

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。