JavaScript DIV внутри контейнер DIV не будет выполнять определенный код

Question

У меня есть DIV внутри контейнера (Div ID = «x1»), который будет не выполнить конкретных команд, возложенных на него с моей функцией doFunc(). Если я поместил div вне контейнера, код будет работать нормально. То, что я пытаюсь сделать, это сделать кнопку «уменьшить изображение» в правом верхнем углу изображения (я использовал CSS). Когда пользователь щелкает изображение, он становится больше, используя мою функцию large(), и когда пользователь нажимает на X, изображение сжимается и скрывает X div. Команда alert («Я пыталась!») Отлично работает, когда X-div помещается внутри контейнера div, но команда изменения размера выполняется только в том случае, если X-div находится вне контейнера (не в правом верхнем углу изображения, где i нужно, чтобы это было.) Кто-нибудь, кто лучше разбирается в HTML и JavaScript, не могли бы вы объяснить мне, что мне нужно сделать, чтобы запустить эти 2 строки кода, не отрываясь от идеи «Нажмите кнопку X, чтобы закрыть»?

document.getElementById(containerId).style.width="300px"; 
document.getElementById(xId).style.display="none"; 

HTML-

<div class="container" id="container1" onclick="large('container1','x1')"> 
<img src="icecream.jpg"> 
<div class="x" id="x1" onclick="doFunc('container1','x1')">X</div> 
    </div> 

JavaScript-

function large(containerId, xId){ 
document.getElementById(containerId).style.width="600px"; 
document.getElementById(xId).style.display="block"; 
} 
function doFunc(containerId, xId){ 
document.getElementById(containerId).style.width="300px"; 
document.getElementById(xId).style.display="none"; 
alert("I tried!"); 

Answer 1

это потому, что когда вы положили его внутри контейнера DIV, то DIV будет также выполняться при нажатии на вторую функцию, вы должны поставить функцию в другом DIV, в моем примере я поместите его на изображение. (Просто заменить изображение)

function large(containerId, xId){ 
 
document.getElementById(containerId).style.width="600px"; 
 
document.getElementById(xId).style.display="block"; 
 
} 
 
function doFunc(containerId, xId){ 
 
document.getElementById(containerId).style.width="300px"; 
 
document.getElementById(xId).style.display="none"; 
 
}

<div class="container"> 
 
\t <img id="img" onclick="large('img','x1')" style="max-width:100%;max-height:100%;" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"> 
 
\t <div class="x" id="x1" onclick="doFunc('img','x1')">X</div> 
 
</div>

Answer 2

Пожалуйста, посмотрите на ниже рабочего кода.

вопрос у вас есть, когда ДИВО x1 щелкает событие является ыми в родительском DIV container1, который называет его OnClick события и увеличивает ширину. Таким образом, при нажатии на x1, он вызывает первый doFunc и уменьшает ширину и в связи с событием кипящим родителем получил onclick события и вызвал large события, которое снова увеличивает ширины.

Следовательно, ничего похожего не произошло.

Это было исправлено ниже, остановив событие, пузырьковое с e.stopPropagation().

function large(containerId, xId){ 
 
document.getElementById(containerId).style.width="600px"; 
 
document.getElementById(xId).style.display="inline"; 
 
} 
 
function doFunc(e, containerId, xId){ 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
document.getElementById(containerId).style.width="300px"; 
 
document.getElementById(xId).style.display="none"; 
 
//alert("I tried!"); 
 
    }

.container 
 
{ 
 
    width: 300px; 
 
} 
 

 
.x { 
 
display: none; 
 
cursor: pointer; 
 
}

<div class="container" id="container1" onclick="large('container1','x1')"> 
 
<img width="100%" src="http://pisces.bbystatic.com//BestBuy_US/store/ee/2015/com/pm/nav_desktops_1115.jpg"> 
 
<div class="x" id="x1" onclick="doFunc(event, 'container1','x1')" style="float:right">X</div> 
 
    </div>