Question

所以我需要显示在javascript中生成的用户ID，但是我无法在文本框上显示它。

这是JavaScript代码：

  function AddDetails(){
      var button = document.getElementById('button');
      button.addEventListener('click', SaveDetails, false);
    }

    function SaveDetails(){

      var CreateuserID = generateuserID();
      document.getElementById('userID').value = CreateuserID;

      var name = document.getElementById('userName').value;
      var occupation = document.getElementById('userOccupation').value;
      sessionStorage.setItem(name, occupation);
      display();

      var name = document.getElementById('userName').value = "";

  var occupation = document.getElementById('userOccupation').value = "";  
}

function display(){
    var output = document.getElementById('output');
    output.innerHTML = "";

    for(var i=0;i<sessionStorage.length;i++)
    {
        var name = sessionStorage.key(i);
        var occupation = sessionStorage.getItem(name);
        output.innerHTML += name+"|"+occupation+"<br>";
    }

}

function generateuserID()
{
    var userIDnum = 1;
    userIDnum++;
}
window.addEventListener('load', AddDetails, false);

这是HTML代码：

<!DOCTYPE HTML>
<html>

<head>
<link rel="stylesheet" href="Style.css">
<script src="script.js"></script>
</head>

<br>

<body>

<section id="input">
<form>

ID : <input type="number" readonly id="userID" value="">

Name : <input type="text" id="userName" >

Occupation : <input type="text" id="userOccupation">

<input type="button" id="button" value="Add">

</form>
</section>

<br>

<br>

Sort by: <select name="sort">
         <option value ="userID">userID</option>
         <option value ="userID">userName</option>
         <option value ="userID">userOccupation</option>
         </select>

<br>         

<section id="output">

</section  
</body>
</html>

请帮助我，我已经这样做好几天了，无法想到解决方案。我尝试使用ECMAScript，它也不起作用。我还是个新人，缺乏知识。

Answer 1

您的generateuserID（）方法未返回任何内容。即使您返回的userIDnum每个人的用户ID都是2，您是否意识到JavaScript只是在浏览器中运行？所有用户之间都不会存在这些变量。

Answer 2

设置文本框的值。做：

$('#//ID of the textbox').val(CreateuserID)

这是假设'CreateuserID'是字符串或整数

编辑：您的CreateuserID函数将需要返回一个值。

Answer 3

示例中有很多错误。您不需要仅用于静态内容的sessionStorage。这是有效的Codepen [https://codepen.io/vivekamin/pen/gQMRPx]。我是根据您的代码为您创建的。请检查一下。这是代码。我只是为了举例说明而使用package com.cascorp; import javax.faces.component.UIComponent; import javax.faces.context.FacesContext; import org.openntf.xsp.debugtoolbar.beans.DebugToolbarBean; import com.ibm.xsp.extlib.component.dynamicview.UIDynamicViewPanel; import com.ibm.xsp.extlib.builder.ControlBuilder.IControl; import om.ibm.xsp.extlib.component.dynamicview.DominoDynamicColumnBuilder.DominoViewCustomizer; import com.ibm.xsp.extlib.component.dynamicview.UIDynamicViewPanel.DynamicColumn; import com.ibm.xsp.extlib.component.dynamicview.ViewDesign.ColumnDef; public class UserProfileViewCustomizer extends DominoViewCustomizer { //this is used to customize the DynamicViewPanels used in the Order Processing views //@SuppressWarnings("unchecked") @Override public void afterCreateColumn(FacesContext context, int index, ColumnDef colDef, IControl column) { //Get a map of the session variables to read the view session scope variable //Map svals = context.getExternalContext().getSessionMap(); //Create a variable for the current component UIComponent columnComponent = column.getComponent(); //Create a reference to the column and set the links to open in read mode DynamicColumn dynamicColumn = (DynamicColumn) columnComponent; //To have every view open the selected documents in read mode add the following dynamicColumn.setOpenDocAsReadonly(true); DebugToolbarBean.get().info("name of column " + dynamicColumn.getColumnName()); /* * If all you need to do is have the views open in read mode instead of * edit mode then the above code is all you need. * If you want to customize the view columns the the follow code can be * used as an example. */ if (dynamicColumn.getColumnName().equalsIgnoreCase("Attachment")){ //make it a link dynamicColumn.setDisplayAs("link"); DebugToolbarBean.get().info("make Attachment Column a link"); } if (dynamicColumn.getColumnName().equalsIgnoreCase("edit")){ //make it a link dynamicColumn.setDisplayAs("link"); DebugToolbarBean.get().info("make edit Column a link"); } //Set column properties for specific views. //if (svals.containsValue("processforkkit")) { //Hide the first column in this view if(dynamicColumn.getColumnName().equalsIgnoreCase("$2")){ dynamicColumn.setRendered(false); } if (colDef.isCategorized() ){ //set the expand and collapse images if the column is categorized DebugToolbarBean.get().info("column is categorized: " + dynamicColumn.getColumnName()); // ExtendedColumnDef extColDef = (ExtendedColumnDef) colDef; // DebugToolbarBean.get().info("twistie image: " + extColDef.twistieImage); UIDynamicViewPanel.DynamicColumn col = (UIDynamicViewPanel.DynamicColumn)column.getComponent(); col.setExpandedImage("expand.png"); col.setCollapsedImage("collapse.png"); DebugToolbarBean.get().info("collapsed image: " + col.getCollapsedImage()); DebugToolbarBean.get().info("expanded image: " + col.getExpandedImage()); DebugToolbarBean.get().info("style class: " + col.getStyleClass()); col.setStyleClass("category_col"); } super.afterCreateColumn(context, index, colDef, column); } }。但是，如果要添加的元素很多，则可以使用createElement，这样效率更高。我只是将最后的数据以段落文本的形式添加到HTML createDocumentFragment元素

HTML：

output

JS代码：

<body>

<section id="input">
<form>

ID : <input type="number" readonly id="userID" value="">

Name : <input type="text" id="userName" >

Occupation : <input type="text" id="userOccupation">

<input type="button" id="button" value="Add">

</form>
</section>

<br>

<br>

Sort by: <select name="sort" id ="sortBy">
         <option value ="userID">userID</option>
         <option value ="name">userName</option>
         <option value ="occupation">userOccupation</option>
         </select>

<br>         

<section id="output">

</section  
</body>

使用javascript生成用户ID并将其显示在文本框中

3 个答案: