Javascript变量打印

Javascript Variable Printing

本文关键字：打印 变量 Javascript      更新时间：2023-09-26

我有c++背景，但对我在Javascript中尝试做的事情有一些问题。我需要做一个伪类，因为Javascript没有它们。我基本上是想根据选择的选项打印一些不同的东西。在这个例子中，我只定义了两个"水果"，但我要做的是使用更多。任何帮助都将非常感激。我知道这里有一些缺陷，比如选择没有以任何方式链接到水果函数。

<!DOCTYPE html>
<html>
<script>
   function select_fruit(name)
   {
      var fruit_name = name;
   }
   function fruit(name, color, amt)
   {
      this.name = name;
      this.color = color;
      this.amt = amt;
   }
   apple = new fruit("apple", "red", 5);
   orange = new fruit("orange", "orange", 1);
   document.getElementById("name").innerHTML = name;
   document.getElementById("color").innerHTML = color;
   document.getElementById("amt").innerHTML = amt;
</script>
<body>
   <select name="pick_these" onchange="fruit(this.value)">
      <option value="apple">Apple</option>
      <option value="orange">Orange</option>
   </select><br />
   <p>I want *amt *color *fruit</p><!--This should say I want 5 red apple, if it's selected on the dropdown-->
</body>
</html>

首先，您缺少<head>标记。除此之外，您需要将document.getElementById.....行移动到select_fruit()函数，并将onchange事件更改为调用select_fruit。我是这样做的:

HTML: 

<select id="fruitlist">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
</select>
<p id="result"></p>

JS: 

window.onload = function() { // or just `(function() {` if script is after above HTML
    var fruits = {
        "apple":{
            "color":"red",
            "amt":5
        },
        "orange":{
            "color":"orange",
            "amt":1
        }
    }, result = document.getElementById('result');
    document.getElementById('fruitlist').onchange = function() {
        var selection = this.options[this.selectedIndex].value;
        result.innerHTML = "I want "+fruits[selection].amt+" "
            +fruits[selection].color+" "+selection;
    };
}; // or `})();` if you used `(function() {` at the start

我同意cdhowie关于125%的评论。
尝试使用JS如Java/c#/c++/ActionScript/等将工作。
你将能够勉强维持一些东西，并且它将做一些功能，一旦你破解它一段时间。

但是这真的，真的不是语言应该用的方式。
如果你对其他语言有技术上的了解，Crockford的"JavaScript: the Good Parts"是一个很好的入门方法。
如果你对语言是如何解析的理解有限或没有理解，或者与你的舒适区相比，你真的感觉迷失在JavaScript中，那么Crockford的书就像一个训练营，为那些想要在低级(使用语言的现状，没有库和最小限度地使用设计模式)掌握语言的坚实起点的人提供帮助。

我想说Stoyan Stefanov的《JavaScript Patterns》是一个了不起的进步，因为它完全按照标签上所说的做了，而且做得很好。

不管怎样，你这里有不少问题。

首先，你的脚本甚至在元素存在之前就请求元素和它们的值。
JS/DOM没有预编译。在大多数情况下，直到您进入客户机/服务器通信，或者您定义函数并在其他地方使用它们之前，您所看到的就是您所得到的，按照您放置它们的顺序。

在这种情况下，您要求的元素el.id === "name" .
如果您查看代码中这一行以上的内容，您会注意到它上面的元素没有id。

这里的解决方案是确保您的脚本低于预期目标(或将所有内容包装在函数中，并调用<select>下面的函数，以便您知道它存在)。 这就引出了第二个问题:你的元素没有id。

如果你没有ID，通过ID抓取这些元素是行不通的。

<select id="my-select-box"></select>
<script>
    var select = document.getElementById("my-select-box");
</script>

如果你把它们反过来，它就不起作用了。
如果缺少.id属性，则无法工作。

至于"类"，不要认为它是定义硬类，然后创建实例。
有时候，这很有用/必要。
其他时候，您只需要关心实例。

我的意思是:在c++中，想想你可能想要创建一个完整的类，而实际上一个简单的结构体就可以完成。
如果一个结构体只需要一个实例呢?

现在想象一下给这个结构体方法，而不需要做任何其他工作(头文件等)。

<select id="fruit-list">
    <option value="apples">apple</option>
    <option value="oranges">orange</option>
    <option value="bananas">banana</options>
</select>
<p id="fruit-output"></p>
var Fruit = function (name, colour, starting_amount) {
    var public_interface = {
        name   : name,
        colour : colour,
        amount : starting_amount
    };
    return public_interface;
};

var apples  = Fruit("apple",   "red",   4),
    oranges = Fruit("orange", "orange", 2),
    bananas = Fruit("banana", "yellow", 1);

var fruit_basket = {
    selected  : "",
    output_el : null,
    apples    : apples,
    oranges   : oranges,
    bananas   : bananas,
    add : function (fruit, num) {
        this[fruit].amount += num;
    },
    remove : function (fruit, num) {
        this[fruit].amount -= num;
    },
    print : function () {
        var fruit   = fruit_basket.selected,
            el      = fruit_basket.output_el,
            message = "I want " + fruit.amount
                    + " " + fruit.colour
                    + " " + fruit.name;
        if (fruit.amount !== 1) { message += "s" }
        if (el.hasOwnProperty("textContent")) {
            el.textContent = message;
        } else {
            el.innerHTML = message;
        }
    },
    select : function (el) {
        var index = el.selectedIndex,
            fruit = el.options[index].value;
        fruit_basket.selected = fruit_basket[fruit];
    },
    set_output : function (el) {
        fruit_basket.output_el = el;
    }
};

var select_box = document.getElementById("fruit-list"),
    output_el  = document.getElementById("fruit-output");

fruit_basket.set_output(output_el);
select_box.addEventListener("change", function () {
    fruit_basket.select(this);
    fruit_basket.print();
});

这不是的答案，但考虑到这比c++或Java解决方案要直接得多，在c++或Java解决方案中，您必须为上述所有内容构建类。

如果这是更高级的，也许你会考虑以更明显的方式将数据从视图和控件中分离出来。

但是，这并不意味着你需要巨大的继承层次结构，或者很多功能相对较少的类。
它是一种非常简单的语言，支持构造/初始化，但您也可以通过在现场创建对象来创建"单例"。

如果你打算认真地使用这门语言，我建议你把这些研究放在里面。

相关文章：