javascript:捕获元素名称和元素的字符串值的语法

Question

我很困惑如何在元素 id 的字符串值和元素本身之间来回切换。我相信问题涉及语法，但无法正确解决。我想在 javascript 中传递一个参数(在本例中为“标题”，并将其用作字符串和元素，如下所示，以使标题消失并出现编辑标题框。

html

//note this html is actually written to page by another javascript function
<span id="title">Title</span><span id="titleedit"></span><img src="edit.gif" onclick="editTitle('title');">

如果我在标题周围省略撇号，我可以让它作为以下元素工作，但它不能作为字符串工作。

JavaScript

function editTitle(field) {
//using field as string only works if parameter in above is in apostrophes
var fieldedit = field+"edit"
var editstring = '<input type="text" name="title" onclick="saveTitle();">save';
document.getElementById('fieldedit').innerHTML = "editstring";
//using as element only works if above has no apostrophes
field.style.display="none";
}

感谢您建议如何完成这两项任务...使标题消失，并仅通过单词标题显示 titleedit。 (我想将标题作为参数传递的原因是因为还有一大堆其他字段需要编辑，我想将每个字段作为一个参数传递。)

Answer 1

当您说 document.getElementById('fieldedit') 时，您说的是“以“fieldedit”作为 id 的元素”。你想要的是“以变量fieldedit的内容作为id的元素。

尝试一下 document.getElementById(fieldedit).innerHTML = editstring;。

更新:

这一行也有问题:

var editstring = "<input type="text" name="title" onclick="saveTitle();">save";

尝试转义引号，或混合使用单引号和双引号。例如:

var editstring = '<input type="text" name="title" onclick="saveTitle();">save';

更新 2:

通过 id="title" 获取对元素的引用:

var field = document.getElementById('title');

现在 field 引用该元素，您可以使用:

field.style.display = 'none';

您也可以在一行中完成所有操作:

document.getElementById('title').style.display = 'none';