英文:
Reporting JavaScript BUG
问题
我目前正在进行一个涉及多种编程语言的项目，包括HTML/JS/PHP。
在我的一个PHP函数中，我发现了一个意外的行为。
我将它分解成更简单的函数，以便更清晰：
<?php
function generateInput($inputID, $oninputFunction)
{
echo '<input id="' . $inputID . '" oninput="' . $oninputFunction . '">';
}
function generateDIV(){
$ID = "someId";
echo '<div>';
generateInput($ID, 'someFunction(' . $ID . ')');
echo '</div>';
}
?>
<script>
function someFunction(selectID) {
console.log(selectID);
}
</script>
<!DOCTYPE html>
<html>
<body>
<?php generateDIV() ?>
</body>
</html>
正如您可以看到的，当在输入框中输入内容时，预期的控制台输出应为 "someId"。
然而，由于某种原因，输出是HTML元素，如下所示：
<input id="someId" oninput="someFunction(someId)">
如果有人能解释这种行为，请告诉我。
英文:
I am currently working on a project involving multiple languages including HTML/JS/PHP.
In one of my PHP functions, I discovered an unexpected behavior.
I broke it down to simpler functions so it would be clearer :
<?php
function generateInput($inputID, $oninputFunction)
{
echo '<input id="' . $inputID . '" oninput="' . $oninputFunction . '">';
}
function generateDIV(){
$ID = "someId";
echo '<div>';
generateInput($ID, 'someFunction('. $ID .')');
echo '</div>';
}
?>
<script>
function someFunction(selectID) {
console.log(selectID);
}
</script>
<!DOCTYPE html>
<html>
<body>
<?php generateDIV() ?>
</body>
</html>
As you can tell, the expected console output when something is typed in the input is "someId".
However, for some reason, the output is the HTML element which is:
<input id="someId" oninput="someFunction(someId)">
If anyone has an explanation to this behavior, please let me know.
答案1
得分: 2
如您所见，当在输入框中键入内容时，预期的控制台输出为"someId"。
不，不是这样的。仔细查看由此生成的HTML：
<input id="someId" oninput="someFunction(someId)">
具体来说，JavaScript 函数调用如下：
someFunction(someId)
在这种情况下，someId 不是一个字符串，而是一个变量。巧合的是，这个变量名与元素的 id 匹配，因此它实际上是 window 对象上的一个属性，它引用了该元素。
（注：这种行为在这种情况下发生是巧合，但不应该依赖它作为一种标准行为。更多信息可以在这里找到。）
因此，代码输出的是该元素。
如果从元素中删除 id，则会出现错误：
Uncaught ReferenceError: someId is not defined
如果您希望它是一个字符串文字，那么它需要用引号括起来：
generateInput($ID, "'someFunction('" . $ID . "')'");
另外... 当尝试将多种语言混合在同一行代码中时，像这样的引号问题非常常见。PHP、HTML 和JS 混在一起就像这样容易导致引号问题。最好尽量将它们分开，以便更清晰地观察每种语言的语法。
英文:
> As you can tell, the expected console output when something is typed in the input is "someId".
No it isn't. Look closely at the HTML being generated by this:
<input id="someId" oninput="someFunction(someId)">
Specifically the JavaScript function call:
someFunction(someId)
In this case someId is not a string. It's a variable. Coincidentally this variable name matches the id of the element, so it's actually a property on the window object which references that element.
(Note: This behavior is happening by coincidence in this case, but it shouldn't be relied upon as a standard. More information can be found starting here.)
So the code is outputting the element.
Remove the id from the element and observe an error:
> Uncaught ReferenceError: someId is not defined
If you want it to be a string literal then it needs quotes around it:
generateInput($ID, "someFunction('". $ID ."')");
As an aside... Quoting problems like this are very common when trying to mix multiple languages all on the same line of code. PHP, HTML, and JS all munged together like this is a recipe for quoting problems. It's best to keep them as separated as you can so you can more clearly observe the syntax of each language.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论