0

我一直在尝试下面的这段 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>
4

5 回答 5

4

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

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);
    };
}
于 2013-05-07T06:54:54.420 回答
0

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

elem.innerHTML = window[text];

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

var data = "This is what I want to Show";
于 2013-05-07T06:54:05.470 回答
0

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

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

见演示。

于 2013-05-07T06:54:30.413 回答
0

这是你的代码..

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

因为这是一个字符串，而不是参考对象“数据”..所以我想这就是你想要的..
1。

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


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

于 2013-05-07T07:02:10.747 回答
0

您正在使用变量 text 分配值以使用 id replace 进行潜水。用这个。

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

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

于 2013-05-07T07:06:44.647 回答