HTML中的Javascript对象和参数引用

Javascript object and parameters reference from the HTML

本文关键字：参数 引用 对象 中的 Javascript HTML      更新时间：2023-09-26

我有这样的想法，我想通过使用函数参数和对象来实现，但它没有按预期工作。

第一个HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Main</title>
        <script type="text/javascript" src="scripting.js"></script>
    </head>
    <body>
        <div >
            <form id='radio'>
                <input type="radio" name="choice" onClick="text(this.value)" value="list">
                <input type="radio" name="choice" onClick="text(this.value)" value="box"></form>
            <h1 id="title">" "</h1>
            <p id="description"></p>
        </div>
    </body>
</html>

这是非常直接的，我将使用单选按钮的值作为javascript text（）函数的参数。

这是我的JavaScript代码：

var choices = document.getElementsByName('choice');
var list = { a : 1 , b : 'Hi' };
var box = { a : 2, b : 'Hello'};

function text(choice) {
    var i;
    for (i = 0; i < choices.length; i += 1)
    {
        if(choices[i].checked)
        {
            document.getElementById('title').innerHTML = choice["a"];
            document.getElementById('description').innerHTML = choice["b"];
        }
    }
}

我从HTML代码中创建了两个与单选按钮同名的对象。接下来，在我的函数中，做了一个for循环来检查单击了哪个单选按钮。根据公式，Head和Paragraph标记应在各自的标记中显示对象内容。当我只是将参数作为一个普通值输入时，它会打印出单选按钮的值。但是，我使用该参数作为对对象变量的引用。示例：

function parameter choice = "list";
document.getElementById('title').innerHTML = choice["a"];

而不是显示值。我得到了"；未定义的"；因此

有人能帮忙吗？

处理此问题的两种方法。如果你保留当前变量，现在它们将是全局的（在窗口对象中），那么使用这个：

var list = { a : 1 , b : 'Hi' };
var box = { a : 2, b : 'Hello'};
var choice = 'list';
console.log(window[choice]);

请注意，我们将选择放在括号中，因为列表和框是窗口的属性。

由于choice等于"list"，因此window[choice]、window['list']和window.list都引用同一个名为list的对象。

另一种方法是将列表和框放在对象中：

var types = {
  list: { a : 1 , b : 'Hi' },
  box: { a : 2, b : 'Hello' }
};
var choice = 'list';
console.log(types[choice]);

我更喜欢这种方法，而不是把所有东西都放在全局/窗口对象中。

相关文章：