HTML/CSS структура рушится каждый раз, когда JavaScript срабатывает

Я действительно новым для кодирования, и я уже потратил так много времени, пытаясь понять это:HTML/CSS структура рушится каждый раз, когда JavaScript срабатывает

У меня есть несколько ящиков (дивы) выложенные в круге , с кнопкой в середине. Когда кнопка нажата, один из ящиков становится желтым.

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

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

Вот мой код: http://codepen.io/solosurge/pen/ggKvYN

// ----Timer----> 
 
function countDown(secs, elem) { 
 
    var element = document.getElementById(elem); 
 
    element.innerHTML = "Please wait for " + secondsToHms(secs) + " seconds"; 
 
    secs--; 
 
    var timer = setTimeout('countDown(' + secs + ',"' + elem + '")', 1000); 
 
    if (secs < 1) { 
 
    clearTimeout(timer); 
 
    randomPhrase(); 
 
    } 
 
    // ----Hour to Min to Sec----> 
 
    function secondsToHms(d) { 
 
    d = Number(d); 
 
    var h = Math.floor(d/3600); 
 
    var m = Math.floor(d % 3600/60); 
 
    var s = Math.floor(d % 3600 % 60); 
 
    return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s); 
 
    } 
 
} 
 

 
// ----Random Pick------> 
 
function randomPhrase() { 
 
    var ids = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; 
 
    var divs = document.getElementsByClassName("div"); 
 

 
    while (divs.length > 0) { 
 
    var i = Math.floor(Math.random() * ids.length); 
 
    divs[0].id = 'item-' + ids[i]; 
 
    ids.splice(i, 1); 
 
    divs = [].slice.call(divs, 1); 
 
    } 
 
}

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
.container { 
 
    width: 860px; 
 
    margin: 0 auto; 
 
} 
 

 
.div { 
 
    margin: 0 auto; 
 
    width: 155px; 
 
    height: 75px; 
 
    padding: 8px; 
 
    border: 2px dashed #000; 
 
} 
 

 
#one { 
 
    float: left; 
 
    margin-top: 10px; 
 
    margin-left: 30%; 
 
} 
 

 
#two { 
 
    float: right; 
 
    margin-top: 10px; 
 
    margin-right: 30%; 
 
} 
 

 
#three { 
 
    float: left; 
 
    margin-top: 30px; 
 
    margin-left: 15%; 
 
} 
 

 
#four { 
 
    float: right; 
 
    margin-top: 30px; 
 
    margin-right: 15%; 
 
} 
 

 
#five { 
 
    float: left; 
 
    margin-top: 30px; 
 
    margin-left: 5%; 
 
    clear: both; 
 
} 
 

 
#six { 
 
    float: right; 
 
    margin-top: 30px; 
 
    margin-right: 5%; 
 
} 
 

 
#seven { 
 
    float: left; 
 
    margin-top: 30px; 
 
    margin-left: 15%; 
 
    clear: both; 
 
} 
 

 
#eight { 
 
    float: right; 
 
    margin-top: 30px; 
 
    margin-right: 15%; 
 
} 
 

 
#nine { 
 
    float: left; 
 
    margin-top: 30px; 
 
    margin-left: 30%; 
 
} 
 

 
#ten { 
 
    float: right; 
 
    margin-top: 30px; 
 
    margin-right: 30%; 
 
} 
 

 
#box1 { 
 
    margin: auto; 
 
    margin-top: 30px; 
 
    width: 300px; 
 
    height: 60px; 
 
    font-size: 30px; 
 
    text-align: center; 
 
} 
 

 
#item-1 { 
 
    background-color: #ff0; 
 
}

<html> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="div" id="one"></div> 
 
    <div class="div" id="two"></div> 
 
    <div class="div" id="three"></div> 
 
    <div class="div" id="four"></div> 
 
    <div class="div" id="five"></div> 
 
    <div class="div" id="six"></div> 
 
    <div class="div" id="seven"></div> 
 
    <div class="div" id="eight"></div> 
 
    <div class="div" id="nine"></div> 
 
    <div class="div" id="ten"></div> 
 
    </div> 
 
    <div id="box1">Click<br> 
 
    <button type="button" onclick="countDown(3,'box1');">Here</button> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2017-02-05 Sergey M.

В чем проблема? Вы указали «id», но меняете «id», поэтому стек divs поверх друг друга. Как вы ожидаете, что страница будет вести себя при нажатии кнопки? –

Структура должна оставаться неизменной с желтой коробкой, заполненной –

вот так? http://codepen.io/mcoker/pen/OWEQYb –

Вы стилизации все циркулярно через id значение. Затем вы переписываете новые идентификаторы в divs в randomPhrase(), что нарушает макет. В randomPhrase() вместо назначения идентификаторов назначьте классы, затем вместо этого введите желтый элемент с помощью имени класса, чтобы ваш макет CSS на основе ID все еще работал.

// ----Timer----> 
 
function countDown(secs, elem) { 
 
    var element = document.getElementById(elem); 
 
    element.innerHTML = "Please wait for " + secondsToHms(secs) + " seconds"; 
 
    secs--; 
 
    var timer = setTimeout('countDown(' + secs + ',"' + elem + '")', 1000); 
 
    if (secs < 1) { 
 
    clearTimeout(timer); 
 
    randomPhrase(); 
 
    } 
 
    // ----Hour to Min to Sec----> 
 
    function secondsToHms(d) { 
 
    d = Number(d); 
 
    var h = Math.floor(d/3600); 
 
    var m = Math.floor(d % 3600/60); 
 
    var s = Math.floor(d % 3600 % 60); 
 
    return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s); 
 
    } 
 
} 
 

 
// ----Random Pick------> 
 
function randomPhrase() { 
 
    var ids = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; 
 
    var divs = document.getElementsByClassName("div"); 
 

 
    while (divs.length > 0) { 
 
    var i = Math.floor(Math.random() * ids.length); 
 
    divs[0].classList.add('item-' + ids[i]); 
 
    ids.splice(i, 1); 
 
    divs = [].slice.call(divs, 1); 
 
    } 
 
}

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
.container { 
 
    width: 860px; 
 
    margin: 0 auto; 
 
} 
 

 
.div { 
 
    margin: 0 auto; 
 
    width: 155px; 
 
    height: 75px; 
 
    padding: 8px; 
 
    border: 2px dashed #000; 
 
} 
 

 
#one { 
 
    float: left; 
 
    margin-top: 10px; 
 
    margin-left: 30%; 
 
} 
 

 
#two { 
 
    float: right; 
 
    margin-top: 10px; 
 
    margin-right: 30%; 
 
} 
 

 
#three { 
 
    float: left; 
 
    margin-top: 30px; 
 
    margin-left: 15%; 
 
} 
 

 
#four { 
 
    float: right; 
 
    margin-top: 30px; 
 
    margin-right: 15%; 
 
} 
 

 
#five { 
 
    float: left; 
 
    margin-top: 30px; 
 
    margin-left: 5%; 
 
    clear: both; 
 
} 
 

 
#six { 
 
    float: right; 
 
    margin-top: 30px; 
 
    margin-right: 5%; 
 
} 
 

 
#seven { 
 
    float: left; 
 
    margin-top: 30px; 
 
    margin-left: 15%; 
 
    clear: both; 
 
} 
 

 
#eight { 
 
    float: right; 
 
    margin-top: 30px; 
 
    margin-right: 15%; 
 
} 
 

 
#nine { 
 
    float: left; 
 
    margin-top: 30px; 
 
    margin-left: 30%; 
 
} 
 

 
#ten { 
 
    float: right; 
 
    margin-top: 30px; 
 
    margin-right: 30%; 
 
} 
 

 
#box1 { 
 
    margin: auto; 
 
    margin-top: 30px; 
 
    width: 300px; 
 
    height: 60px; 
 
    font-size: 30px; 
 
    text-align: center; 
 
} 
 

 
.item-1 { 
 
    background-color: #ff0; 
 
}

<html> 
 

 
<body> 
 
    <div class="container"> 
 

 
    <div class="div" id="one"></div> 
 
    <div class="div" id="two"></div> 
 

 
    <div class="div" id="three"></div> 
 
    <div class="div" id="four"></div> 
 
    <div class="div" id="five"></div> 
 

 
    <div class="div" id="six"></div> 
 
    <div class="div" id="seven"></div> 
 
    <div class="div" id="eight"></div> 
 

 
    <div class="div" id="nine"></div> 
 
    <div class="div" id="ten"></div> 
 
    </div> 
 

 
    <div id="box1">Click<br> 
 
    <button type="button" onclick="countDown(3,'box1');">Here</button> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2017-02-05 17:18:39

HTML/CSS структура рушится каждый раз, когда JavaScript срабатывает

ответ

Смежные вопросы