Question

我一直在尝试下面的这个Javascript代码，这将允许我根据点击的内容将不同的变量插入到html中。不幸的是，它不会显示变量的值，而只显示下面定义的变量名称。

<head>
<script type="text/javascript">
var data=new String ()
data="This is what I want to Show"
function myFunction(text) 
{
elem = document.getElementById('replace');
elem.innerHTML = text
}

</script>
</head>

<body>
<button onclick="myFunction('data')">  Press    </button>

<div id="replace">
Test
</div>

</body>

Answer 1

您传递的是字符串，而不是变量，请使用：

onclick="myFunction(data)"

的字符串必须被引用，可变（参考，在这种情况下，为一个字符串）不得（否则它会被评估为一个文本字符串）。

顺便说一句，JavaScript不需要您在为其赋值之前显式创建字符串，您可以只使用：

var data = 'This is what I want to show.';

和同时使用innerHTML工作，如果你正在做的是更新文本内容（也有被认为是没有嵌套的节点），你可以简单地使用：

function myFunction(text) {
    // the var declaration prevents the variable becoming global
    var elem = document.getElementById('replace');
    elem.appendChild(document.createTextNode(text));
}

和，使其更通常-有用，避免硬编码的id的函数内的变化，而不是将它传递给功能的元件的：

function myFunction(text, elem) {
    // testing if the element is a node, if not assume it's a string of the id:
    var elem = elem.nodeType === 1 ? elem : document.getElementById('replace');
    elem.appendChild(document.createTextNode(text));
}

将上述内容与以下内容结合起来：

onclick="myFunction(data, 'replace')"

或者：

onclick="myFunction(data, document.getElementById('replace'))"

我还强烈，建议在线不使用/突兀的JavaScript，只是为了更容易更新到被调用的函数，这些参数，并且函数本身，在一个地方（而不是必须导航通过文档并查找调用函数的每个实例）：

// define the function here

var buttons = document.getElementsByTagName('button'),
    replace = document.getElementById('replace'),
    data = 'Text I want to show.';

for (var i = 0, len = buttons.length; i < len; i++){
    buttons[i].onclick = function(){
        myFunction(data, replace);
    };
}

Answer 2

data附加到全局window对象。要访问它：

elem.innerHTML = window[text];

此外，不需要new String()作为字符串可以通过以下方式定义：

var data = "This is what I want to Show";

Answer 3

如果“这是你要显示的内容”，最好把它放在参数中，以便在有更多按钮时可以重复使用该功能：

<button onclick="myFunction('This is what I want to Show')">Press</button>

请参阅DEMO。

Answer 4

这是你的代码..

<button onclick="myFunction('data')">  Press    </button>

因为这是一个字符串，而不是引用对象'data'.. 所以我想这就是你想要的...... 1。

<button onclick="myFunction(data)">  Press    </button>

2. <button onclick="myFunction('This is what I want to Show')"> Press </button>

Answer 5

您正在使用变量文本为ID替换分配值。使用它。

elem.innerHTML = data instead elem.innerHTML = text.

或者将args传递给没有单个qoute的函数。

Innerhtml的Javascript帮助

5 个答案: