Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.07.2020, 10:49
Аспирант
Отправить личное сообщение для Лунтик Посмотреть профиль Найти все сообщения от Лунтик
 
Регистрация: 12.06.2020
Сообщений: 35

Добовление инпута к ряду
У меня есть код к которому нужно прибавить инпут.Вот код
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <style>

.q1{
display:flex;
font-size:40px;
 
}
#min111{
margin-left:97px;
width:80px;
height:40px;
margin-top:10px;
text-align:center;
border: 2px solid #dedede;
}

#min1q{
margin-left:5px;
width:80px;
height:40px;
margin-top:10px;
text-align:center;
border: 2px solid #dedede;
}

#min2q{
margin-left:5px;
width:80px;
height:40px;
margin-top:10px;
text-align:center;
border: 2px solid #dedede;
}

#min3q{
margin-left:5px;
width:80px;
height:40px;
margin-top:10px;
text-align:center;
border: 2px solid #dedede;
}

#min4q{
margin-left:5px;
width:80px;
height:40px;
margin-top:10px;
text-align:center;
border: 2px solid #dedede;
}

#min5q{
margin-left:5px;
width:80px;
height:40px;
margin-top:10px;
text-align:center;
margin-bottom:5px;
border: 2px solid #dedede;
}
#min6q{
margin-left:5px;
width:80px;
height:40px;
margin-top:10px;
text-align:center;
border: 2px solid #dedede;
}

#min7q{
margin-left:5px;
width:80px;
height:40px;
margin-top:10px;
text-align:center;
border: 2px solid #dedede;
}
.q{
margin-left:130px;
display:flex;
}

.q2{
margin-left:160px;
display:flex;
}

.q3{
margin-left:200px;
display:flex;
}

.q4{
margin-left:240px;
display:flex;
}

.q5{
margin-left:280px;
display:flex;
}

.q6{
margin-left:320px;
display:flex;
}

.q71{
margin-left:370px;
display:flex;
}


.q8{
margin-left:122px;
display:flex;
}

p{
margin-left:15px;
margin-bottom:0px;
}
button{
margin-top:40px;
margin-left:10px;
width:100px;
height:20px;
}
#mynum1{
width:80px;
height:40px;
font-size:35px;
}
#user {
    width: 80px; 
	height:40px;
	font-size:35px;
	margin:-5px;
   } 
q7{

}
hr{
margin-left:10px;
}
input{
text-align:center;
}

.loogo1{
margin-top:30px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type='number'] {
    -moz-appearance: textfield;
}
</style>
 <div class="loogo1">
  <div class="q71">
 <input type="number" id="mynum1"  /> <input type="button" onclick="guessNum1();" value="Проверка">
<p id="out"></p>
    <p id="out"></p>
    <p id="temp-out"></p>
   </div>
   
  <div class="q6">
  <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   </div>
  <div class="q5">
  <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   </div>
  <div class="q4">
  <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   </div>
  <div class="q3">
  <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   </div>
  <div class="q2">
  <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input type="text" maxlength="200" size="5"  id="user" ></p>
   <p><input type="text"  maxlength="200" size="5" id="user" ></p>
   <p><input type="text" maxlength="200" size="5" id="user" ></p>
   </div>
<div class="q">  
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   <p><input maxlength="200" size="5" id="user" ></p>
   </div>
<div class="q1  ">
       <div id="min111"></div>	   
       <div id="min1q"></div> 
       <div id="min2q"></div>
       <div id="min3q"></div>  
       <div id="min4q"></div> 
       <div id="min5q"></div>	
       <div id="min6q"></div> 
       <div id="min7q"></div>	   	   
</div>
</div>	   

  </p> 
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
     <script type="text/javascript">
 var Sum71i, tempOut;



function guessNum1() {
  
  var num = document.getElementById('mynum1').value;

  if (num == Sum71i) {
        out.innerHTML = 'Вы угадали';
        alert('Вы ответели правельно молодец');
    }
  else if (num != Sum71i) {
alert('вы ответели неправельно попробуйте найти ошибку');
  } else if (num > Sum71i) {
    out.innerHTML = 'Вы ввели число больше!'
  } else if (num < Sum71i) {
    out.innerHTML = 'Вы ввели число меньше!'
  }

}
  

    var min111 =  Math.floor(Math.random() * 10);
    document.getElementById("min111").innerHTML = min111;
	
	 var min1q =  Math.floor(Math.random() * 10);
    document.getElementById("min1q").innerHTML = min1q;
	
	
	 var min2q =  Math.floor(Math.random() * 10);
    document.getElementById("min2q").innerHTML = min2q;
	
	var min3q =  Math.floor(Math.random() * 10);
    document.getElementById("min3q").innerHTML = min3q;
	
	 var min4q =  Math.floor(Math.random() * 10);
    document.getElementById("min4q").innerHTML = min4q;
	
	
	 var min5q =  Math.floor(Math.random() * 10);
    document.getElementById("min5q").innerHTML = min5q;
	
	var min6q =  Math.floor(Math.random() * 10);
    document.getElementById("min6q").innerHTML = min6q;
	
	
	 var min7q =  Math.floor(Math.random() * 10);
    document.getElementById("min7q").innerHTML = min7q;
	
	Sumw= min111+ min1q;
	
	
	Sum1w= min1q+ min2q;
	
	
	Sum2w= min2q+ min3q;
	
	
	Sum3w= min3q+ min4q;
	
	
	Sum4w= min4q+ min5q;
	
	
	Sum5w= min5q+ min6q;
	
	
	Sum6w= min6q+ min7q;




	
	
	
	Sum21e= Sumw+ Sum1w;

	
	Sum22e= Sum1w+ Sum2w;

	
	Sum23e= Sum2w+ Sum3w;
	
	Sum24e= Sum3w+ Sum4w;
	
	Sum25e= Sum4w+ Sum5w;
	
	Sum26e= Sum5w+ Sum6w;
	
	
	
	Sum31r= Sum21e+ Sum22e;
	
	Sum32r= Sum22e+ Sum23e;
	
	Sum33r= Sum23e+ Sum24e;
	
	Sum34r= Sum24e+ Sum25e;
	
	Sum35r= Sum25e+ Sum26e;
	
	
	
	Sum41t= Sum31r+ Sum32r;
	
	Sum42t= Sum32r+ Sum33r;
	
	Sum43t= Sum33r+ Sum34r;
	
	Sum44t= Sum34r+ Sum35r;
	
	
	Sum51y= Sum41t+ Sum42t;
	
	Sum52y= Sum42t+ Sum43t;
	
	Sum53y= Sum43t+ Sum44t;
	
	
	
    Sum61u= Sum51y+ Sum52y;
	
	 Sum62u= Sum52y+ Sum53y;
	 
	
	 Sum71i= Sum61u+ Sum62u;
	 
	 
	
 </script>
  <script type="text/javascript">
        
	  const inps = document.querySelectorAll('[id="user"]');
    inps.forEach((input, i) => {
   const next = inps[(inps.length + --i) % inps.length];

    input.addEventListener('keydown', event => {
    if(event.code == 'Enter' || event.code == 'Tab') (event.preventDefault(), next.select(), next.focus())
    });
    })
	
        </script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 03.07.2020, 14:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Лунтик, ты бы поскромнее тестовый пример сделал...
Ответить с цитированием
  #3 (permalink)  
Старый 03.07.2020, 18:41
Аспирант
Отправить личное сообщение для Лунтик Посмотреть профиль Найти все сообщения от Лунтик
 
Регистрация: 12.06.2020
Сообщений: 35

Ну как получилось
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2020, 09:27
Аспирант
Отправить личное сообщение для Лунтик Посмотреть профиль Найти все сообщения от Лунтик
 
Регистрация: 12.06.2020
Сообщений: 35

Ау есть кто нибуть
Ответить с цитированием
  #5 (permalink)  
Старый 14.07.2020, 04:46
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Инпут добавляется так
var input = document.createElement("input");
input.type = "text";
document.body.appendChild(input);

А куда его добавлять из примера не понятно
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как определить индекс инпута в блоке в такой ситуации MC-XOBAHCK Общие вопросы Javascript 6 10.09.2018 13:49
Как получить значение инпута vano_mig Events/DOM/Window 6 22.09.2017 00:57
как вернуть значение value инпута Alex Peshkov jQuery 2 28.04.2017 14:48
Добавление инпута kronter Элементы интерфейса 1 19.04.2014 03:08
Добовление формы еще Kuklavod jQuery 2 03.11.2011 15:12