Question

如何设置此课程＆＃39;输出＆＃39;将值变为JavaScript中按钮单击的变量

＆＃13;

<input class="output" type="hidden" name="output" value="[{"lx":25,"ly":43,"mx":25,"my":42},{"lx":25,"ly":41,"mx":25,"my":43},{"lx":108,"ly":34,"mx":108,"my":33}]">

＆＃13;

预期输出：

var myVal = [{lx:25,ly:43,mx:25,my:42},{lx:25,ly:41,mx:25,my:43},{lx:108,ly:34,mx:108,my:33}];

Answer 1

首先修复HTML上的引用，这样你就可以使用单引号来开始和结束字符串，然后在其中加双引号（你现在拥有的不是合法的HTML）：

<input class="output" type="hidden" name="output" value='[{"lx":25,"ly":43,"mx":25,"my":42},{"lx":25,"ly":41,"mx":25,"my":43},{"lx":108,"ly":34,"mx":108,"my":33}]'>

假设您可以使用HTML层次结构将<input>标记引用到名为elem的变量中并修复value="xxx"字符串上的字符串分隔符，那么您可以执行此操作这样：

var myVal = JSON.parse(elem.value);

如果您需要帮助获取<input>标记的DOM参考，您可以执行以下操作：

var elem = document.querySelectorAll(".output")[0];
var myVal = JSON.parse(elem.value);

这假设目标<input>标记是包含class="output"的页面中的第一个元素。如果情况并非如此，那么您必须发布该页面的HTML，以便我们可以建议如何从页面DOM中选择所需的<input>标记。

如果您的HTML中有一个按钮：

<button id="getdata">Get Data</button>

并且，您想要将点击处理程序挂钩到那个，您可以将此Javascript放在文档末尾的脚本标记中：

document.getElementById("getdata").addEventListener("click", function(e) {
    var elem = document.querySelectorAll(".output")[0];
    var myVal = JSON.parse(elem.value); 
    // do something with myVar here
});

将所有内容整合到一个工作片段中：

＆＃13;

document.getElementById("getdata").addEventListener("click", function(e) {
    var elem = document.querySelectorAll(".output")[0];
    var myVal = JSON.parse(elem.value); 
    // do something with myVar here
    log(JSON.stringify(myVal));
});

function log(d) {
    var item = document.createElement("div");
    item.textContent = d;
    document.body.appendChild(item);
}

＆＃13;

<input class="output" type="hidden" name="output" value='[{"lx":25,"ly":43,"mx":25,"my":42},{"lx":25,"ly":41,"mx":25,"my":43},{"lx":108,"ly":34,"mx":108,"my":33}]'><br>
<button id="getdata">Get Data (press me)</button><br><br>

＆＃13;

Answer 2

试试这个：http://jsfiddle.net/lotusgodkk/GCu2D/831/

HTML：

<input class="output" type="hidden" name="output" value='[{" lx ":25,"ly ":43,"mx ":25,"my ":42},{"lx ":25,"ly ":41,"mx ":25,"my ":43},{"lx ":108,"ly ":34,"mx ":108,"my ":33}]' />
<button>Get</button>

JS：

$(document).ready(function () {
    $("button").on("click", function () {
        var v = $("input").val()
        console.log(JSON.parse(v));
    });
});

注意：确保在输入的value属性中使用单引号。请在此处查看此答案中的HTML。否则这将无效。

这个答案在jquery中。但是，同样可以在javascript中完成。关键是要更正HTML，然后解析输入值

Answer 3

使用普通的js：

＆＃13;

var myVal = null;
var set = function() {
  myVal = document.getElementsByName("output")[0].value;
  alert(myVal); // string type
  myVal = JSON.parse(myVal);
  alert(myVal); // json type
};

＆＃13;

<!-- updated quotes for value attribute -->
<input class="output" type="hidden" name="output" value='[{"lx":25,"ly":43,"mx":25,"my":42},{"lx":25,"ly":41,"mx":25,"my":43},{"lx":108,"ly":34,"mx":108,"my":33}]' />
<input type="button" onclick="set()" value="Set" />

＆＃13;

JavaScript变量设置问题

3 个答案: