Форум

cyber · #11 (**permalink**) 12.09.2012, 14:50

вот так

<!DOCTYPE HTML>
<html>
  <head>
    <style>
    
      .happyend {
      
        background-color:red;
      
      }
    </style>
  </head>
  <body>
<div id="win">
  <div id="out_txt_1" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_2" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_3" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_4" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_5" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_6" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_7" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_8" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_9" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_10" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_11" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_12" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_13" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_14" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_15" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_16" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_17" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_18" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_19" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_20" class="inviz" contenteditable="true">текст</div>
</div>
    
    <a href='#' id='bt'>go</a>
    <script>


 
     !function () {
        
      var elem =  document.getElementById('win');//у меня родитель с id "win"
      var child = elem.getElementsByClassName('inviz');
       var button = document.getElementById('bt');
       var leng = child.length;
       var i = 0;
        
       
        button.onclick = function (e) {
         
          
        if (i >= leng) return; 
          
       child[0].className = 'happyend';
         
        i++;
        return false;
          
        }
          
       }();
 
    </script>




  </body>
</html>

Torch`Ok · #12 (**permalink**) 12.09.2012, 15:03

Выкину по масмуму кода может кто че заметит...
Index.html ==>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link href="css/head.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
<script language="JavaScript">
function l_image(a)
         {
          document.images["tool"].src=a
         }

</script>
 <script>
 
     !function () {
        
      var elem =  document.getElementById('parent');
      var child = elem.getElementsByClassName('inviz');
       var leng = child.length;
       var i = 0;
        
        document.getElementById('getdiv').onclick = function (e) {
         
          
        if (i >= leng) return; 
        
         child[i].className = 'inviz happyend';
         i++;
          
        }
          
       }();
 
    </script> 
<script language="JavaScript">
$(document).ready(init);

function init(){
  $(".happyend").draggable({
     containment:'parent',
     cursor: 'move'
  });
  $("#ass2").click(function(){
    $(".happyend").draggable("disable");
  });
  $("#ass1").click(function(){
    $(".happyend").draggable("enable");
  });
}
   
</script>

<title></title>
</head>

<body>
<div id="getdiv"><input type="button" value="Добавить"/></div>
<div id="win">
  <IMG SRC="images/art/clp85.jpg" NAME="tool"/>
  
  <div id="out_txt_1" class="happyend" contenteditable="true">Текст</div>
  <div id="out_txt_2" class="happyend" contenteditable="true">Текст</div>
  <div id="out_txt_3" class="happyend" contenteditable="true">Текст</div>
  <div id="out_txt_4" class="happyend" contenteditable="true">Текст</div>
  <div id="out_txt_5" class="happyend" contenteditable="true">Текст</div>
  <div id="out_txt_6" class="happyend" contenteditable="true">Текст</div>
  <div id="out_txt_7" class="happyend" contenteditable="true">Текст</div>
  <div id="out_txt_8" class="happyend" contenteditable="true">Текст</div>
  <div id="out_txt_9" class="happyend" contenteditable="true">Текст</div>
  <div id="out_txt_10" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_11" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_12" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_13" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_14" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_15" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_16" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_17" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_18" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_19" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_20" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_21" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_22" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_23" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_24" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_25" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_26" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_27" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_28" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_29" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_30" class="inviz" contenteditable="true">Дополнительное поле</div>
  
    
  </div>
   
<div id="block_om">Для смены режима "перемещения" или "редактирования" используйте эти кнопки.  
  <input id="ass1" type="button" value="Перемещать" Onclick="init()">
  <input id="ass2" type="button" value="Редактировать" Onclick="init1()"> 
  </div>
</body>

cyber · #13 (**permalink**) 12.09.2012, 15:05

Сообщение от Torch`Ok

Выкину по масмуму кода может кто че заметит...
Index.html ==>

а по русски можно или хотя бы на английском

Torch`Ok · #14 (**permalink**) 12.09.2012, 15:10

Сообщение от cyber

вот так

<!DOCTYPE HTML>
<html>
  <head>
    <style>
    
      .happyend {
      
        background-color:red;
      
      }
    </style>
  </head>
  <body>
<div id="win">
  <div id="out_txt_1" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_2" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_3" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_4" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_5" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_6" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_7" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_8" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_9" class="happyend" contenteditable="true">текст</div>
  <div id="out_txt_10" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_11" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_12" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_13" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_14" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_15" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_16" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_17" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_18" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_19" class="inviz" contenteditable="true">текст</div>
  <div id="out_txt_20" class="inviz" contenteditable="true">текст</div>
</div>
    
    <a href='#' id='bt'>go</a>
    <script>


 
     !function () {
        
      var elem =  document.getElementById('win');//у меня родитель с id "win"
      var child = elem.getElementsByClassName('inviz');
       var button = document.getElementById('bt');
       var leng = child.length;
       var i = 0;
        
       
        button.onclick = function (e) {
         
          
        if (i >= leng) return; 
          
       child[0].className = 'happyend';// тут вроде [i] нужно
         
        i++;
        return false;
          
        }
          
       }();
 
    </script>




  </body>
</html>

все равно не получается

Torch`Ok · #15 (**permalink**) 12.09.2012, 15:11

Сообщение от cyber

а по русски можно или хотя бы на английском

По максимуму

сори

cyber · #16 (**permalink**) 12.09.2012, 15:16

сhild[0].className = 'happyend';// тут вроде [i] нужно

нет.
Открой те консоль и гляньте есть там ошибки или нет

Torch`Ok · #17 (**permalink**) 12.09.2012, 15:25

<script>
      !function () {
         
      var elem =  document.getElementById('win');
      var child = elem.getElementsByClassName('inviz');// TypeError: elem is null 
       var button = document.getElementById('getdiv');
       var leng = child.length;
       var i = 0;
         
        
        button.onclick = function (e) {
          
           
        if (i >= leng) return; 
           
       child[0].className = 'happyend';
          
        i++;
        return false;
           
        }
           
       }();
  
    </script>

cyber · #18 (**permalink**) 12.09.2012, 15:28

выведите в консоль(console.log(elem)) чему равно elem и скопируйте

Torch`Ok · #19 (**permalink**) 12.09.2012, 15:30

[14:29:05.918] ReferenceError: elem is not defined

cyber · #20 (**permalink**) 12.09.2012, 15:42

такая ошибка бывает только если не может найти элемент с таким id, проблема не в моем коде

Форум

Справочник

Discord чат

Курсы javascript