选择 /未选择元素时，请更换canvas img

Question

当用户单击列表中的项目时，我正在尝试在画布上显示过滤器(以及图像(：

<div tabindex="-1" class="filter_box" id="''.$filters[$i].''" onclick="selectFilter(''.$filters[$i].'')">
    <img class="filter" id="''.$filters[$i].''" src="pictures/filters/'.$filters[$i].'"/>
</div>

转化为易于阅读的(在浏览器中检查页面时的控制台(：

<div tabindex="-1" class="filter_box" id="'mask1.png'" onclick="selectFilter('mask1.png')">
    <img class="filter" id="'mask1.png'" src="pictures/filters/'mask1.png'"/>
</div>
<div tabindex="-1" class="filter_box" id="'mask2.png'" onclick="selectFilter('mask2.png')">
    <img class="filter" id="'mask2.png'" src="pictures/filters/'mask2.png'"/>
</div>
//...

我在这里要做的是将所选过滤器名称传递给画布上显示的img：

<img class="filter_img" id="filter_image" src="/pictures/filters/(selected filter name)">

我正在努力选择列表中的过滤器，当用户选择它以记住哪个过滤器"选择"时，我正在尝试更改DIV id(然后稍后取消选择并选择另一个过滤器(，然后通过相应的名称作为加载IMG的来源：

function selectFilter(filter_name)
{
    document.getElementById(filter_name).id = "selected_filter";
    document.getElementById(filter_image).src = "/pictures/filters/" + "filter_name";
}

问题是我无法更改任何id或src。我得到Cannot set property 'id' of null。

非常感谢！

Answer 1

您正在尝试选择具有ID mask1.png的元素，

但是您的元素ID是'mask1.png'，包括' -Character。

所以getElementById找不到您的元素。

Mask2.png也是如此。getElementById找不到您的元素并返回null。您无法设置null的ID，这就是您的错误告诉您的：Can't set property 'id' of null.