函数调用中的字符串与函数中定义的字符串不同 - 奇怪的错误答案

【问题标题】：String in function call treated differently than string defined in function - strange error函数调用中的字符串与函数中定义的字符串不同 - 奇怪的错误
【发布时间】：2019-02-24 04:55:36
【问题描述】：

我正在尝试制作一个可以在单击时编辑 dom 的函数，我可以将不同的元素传递到该函数中，也可以减少重复代码。但是，当我在函数中将 id 作为字符串传递时，它不会抓取 dom 元素。但是，如果我在函数中声明的字符串中使用相同的文本，它会。我已经尝试控制台记录输出并在 dom 请求中使用我定义的相同字符串，并且该字符串有效，但是函数原型中定义的变量对我来说不是无法解释的。

e.x 将起作用 var x = document.getElementById('button1').style.display="block";

但是 var x = document.getElementById(str1).style.display="block";不会，其中 str 是从函数头中获取的，即使是 str console.logs("button1"); 但是，如果我在函数内声明一个变量 r = "button1" var x = document.getElementById(r).style.display="block"; - 这会工作为什么传递给函数的字符串会被区别对待

示例小提琴说明问题 https://jsfiddle.net/peacefulgoldfish/wpvyu5fr/20/

html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script
    type="text/javascript"
    src="/js/lib/dummy.js"

  ></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type="text/css">
    #div1 {
  width: 100px;
  height: 30px;
  background-color: red;
}

#button1{
  display: none;
  width: 100px;
  height: 30px;
  background-color:blue;
}
  </style>
  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">




function switchv(){
switchbutton("'block'", "'button1'");
}

function switchbutton(str, str2){
console.log(str2)
r = str2;

    var x = document.getElementById(r).style.display="block";

}



</script>

</head>
<body>

<button id="div1" onclick="switchv();">

</button>

<div id="button1">

</div>

  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: ""
      }], "*")
    }
  </script>
</body>
</html>

【问题讨论】：

你为什么要引用两次：switchbutton("'block'", "'button1'");?
你的函数调用有错误。 switchbutton("'block'", "'button1'"); 应该是 switchbutton("block", "button1");。应该是双引号或单引号。两者都不是。
那不起作用，我有 2 个引号的原因是因为其中 1 个在传入后会自动删除，并且 DOM 需要元素 id 上的引号。如果你传入单引号，它什么也不做
@davej 不正确：这是一个固定的小提琴：jsfiddle.net/togu9drh
我明白了，谢谢你的澄清，我想我认为语法更挑剔

标签： javascript html css string dom

【解决方案1】：

删除“'button1'”周围的单引号。

此功能将起作用：

function switchv(){
    switchbutton("block", "button1");
}

编辑： 似乎 jsfiddle 不喜欢 onclick=switchv()，尽管它在独立的 html 页面中可以工作。

不过，在 JavaScript 部分中设置 onclick 函数似乎可行。这是修改后的版本：https://jsfiddle.net/wpvyu5fr/40/

【讨论】：

这不起作用，我有 2 个引号的原因是因为其中 1 个在传入后会自动删除，并且 DOM 需要在元素 id 上加上引号
@davej 我测试了上面的内容，它可以工作。 dom 不需要在元素 id 周围加上引号。你在文字周围加上引号。
你能发布你的代码吗，因为我复制粘贴了你的代码，它对我不起作用。 jsfiddle.net/peacefulgoldfish/wpvyu5fr/26
@davej 在小提琴中它说switchv 没有定义。我使用单个 HTML 页面进行了测试，我将使用代码更新我的答案
好的，谢谢，看来 javascript 比我预期的要灵活得多。我发现 switchv 未定义的原因与 jsfiddle 调用它的方式有关。如果我使用你的格式并在 html 脚本标签中调用它，我可以让它工作或使用你写的新方法

【解决方案2】：

关闭指向您发送的小提琴的链接，您似乎在 switchbutton 函数 str1 中调用了 str 参数，它们需要相同。双引号也不是必需的。

function switchbutton(str, str2){
  var x = document.getElementById(str2);
  x.style.display = str;
}

【讨论】：

很好，但是如果使用这种方法，当我尝试它时，dom仍然不会更新