Сылка с переменой

Gora · November 18, 2017

Ребят поскольку я только начинающий, подскажите как формировать ссылку с переменой,

То есть как сделать чтобы к силки добавлялось значение с переменой

!DOCTYPE html>
<html lang="ua-UA">
<head>
	<meta charset="UTF-8"/>
	<title>Люстра в моїй кiмнатi</title>
	<link rel="stylesheet" href="style.css">

</head>
<body>
	<h1 align="center">Управлiння люстри в моїй кiмнатi</h1>
	<div class="zaholovok red"  id="r">ЧЕРВОНИЙ</div>
	<input type="range" id="fan11" min="0" max="1023" value="0" step="1" oninput="fan1()"> 
	<div class="zaholovok green" id="g">ЗЕЛЕНЙ</div>
	<input type="range" id="fan22" min="0" max="1023" value="0" step="1" oninput="fan2()"> 
	<div class="zaholovok blue" id="b">СИНIЙ</div>
	<input type="range" id="fan33" min="0" max="1023" value="0" step="1" oninput="fan3()"> 
	<div class="zaholovok wait" id="w">БIЛИЙ</div>
	<input type="range" id="fan44" min="0" max="1023" value="0" step="1" oninput="fan4()"> 
	
	<a href="http://192.168.0.106/ledr?r="+ id="r">ЗАСТОСУВАТИ</a> То есть как сделать чтобы к  силки добавлялось значение с переменой
	
	
	<script type="text/javascript" src="function.js"></script>
</body>

</html>

Скрытый текст

function fan1()
{
	var rang=document.getElementById('fan11');
	var p=document.getElementById('r');
	p.innerHTML=rang.value;
	
}

function fan2()
{
	var rang=document.getElementById('fan22');
	var p=document.getElementById('g');
	p.innerHTML=rang.value;
	
}

function fan3()
{
	var rang=document.getElementById('fan33');
	var p=document.getElementById('b');
	p.innerHTML=rang.value;
	
}

function fan4()
{
	var rang=document.getElementById('fan44');
	var p=document.getElementById('w');
	p.innerHTML=rang.value;
	
}

Gora · November 19, 2017

Все работает использовал данный скрипт, кому надо пользуйтесь это для модуля esp8266

<script>
	function led()
	{
	b1 = document.getElementById('button1').value;
	b2 = document.getElementById('button2').value;
	b3 = document.getElementById('button3').value;
	b4 = document.getElementById('button4').value;
	server = "/led?r="+b1+"&g="+b2+"&b="+b3+"&w="+b4;
	console.log(server);
	request = new XMLHttpRequest();
	request.open("GET", server, true);
	request.send();
	}

</script>

mrnobody · November 18, 2017

Так?

Я лишние айдишники убрал, хотя возможно они вам нужны. И у ссылки был дублировался id="r" как у первого заголовка инпута, я заменил его на id="link". Еще у ссылки перед id знак плюса явно лишний.

wwt · November 18, 2017

я конечно возможно чего-то не понимаю, но зачем тут javascript вообще нужен, достаточно поместить все поля input внутрь тега form и задать ему соответствующий атрибут action и атрибут method="GET" и вместо тега А , добавить нормальную кнопку input c type=submit

mrnobody · November 18, 2017

Вот так:

Gora · November 18, 2017

35 минут назад, mrnobody сказал:

Так?

Я лишние айдишники убрал, хотя возможно они вам нужны. И у ссылки был дублировался id="r" как у первого заголовка инпута, я заменил его на id="link". Еще у ссылки перед id знак плюса явно лишний.

так это то, что я хотел, спасибо

Я конечно получил ответ на свой вопрос и не вправе просить еще что-то, я очень благодарен за проделанную вами работу.
Конечно если у вас есть время объяснить как сделать чтобы Сылка выполнялась сразу не используя кнопку то есть передавалась все промежуточные значения тоже.
Ну и хотелось чтобы мы оставались на нашем сайте.

Gora · November 18, 2017

Если нетрудно можете объяснить или дать пример как формировать ссылку следующим образом

вместо нулей вставлять значения переменных

http://192.168.0.106/led?r=0&g=0&b=0&w=0

Gora · November 18, 2017

wwt а можно пример?

Gora · November 18, 2017

Большое спасибо. и последний вопрос как сделать так чтобы форма отправляла и промежуточные значения и кнопку не нужно нажимать. конечно если это возможно

mrnobody · November 18, 2017

Это уже нужен XMLHttpRequest. тут посложнее. Но все равно не понятно, после отправки данных что должно происходить? Обработчик по адресу http://192.168.0.106/led должен обрабатывать запрос и что-то возвращать или как?

Gora · November 18, 2017

смысл здесь следующий когда мы отправляем строку http://192.168.0.106/ledr?r=324&g=244&b=117&w=224 я ее принимаю на другом устройстве

HTTP.on("/led", handle_r);

void handle_r() {
String r = HTTP.arg("r");
String g = HTTP.arg("g");
String b = HTTP.arg("b");
String w = HTTP.arg("w");
int ledr = r.toInt();
int ledg = g.toInt();
int ledb = b.toInt();
int ledw = w.toInt();
ledr=1023-ledr;
ledg=1023-ledg;
ledb=1023-ledb;
ledw=1023-ledw;
analogWrite(LED_BUILTIN, ledr);
//analogWrite(LED_BUILTIN, ledg);
//analogWrite(LED_BUILTIN, ledb);
//analogWrite(LED_BUILTIN, ledw);
return;
}

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

делаю свою версию умного дома. Если хотите позже закину видео и все материалы проекта в эту тему.

mrnobody · November 18, 2017

Попробуйте так

я значения собираю вручную, хотя наверное можно через formData сделать https://learn.javascript.ru/xhr-forms#formdata

Gora · November 18, 2017

последний вариант не работает.

возможная причина здесь так вы добавляете знак всегда &

function createSubString(prevValue, it) { return (prevValue += "&" + it.name + "=" + it.value);

а в ссылке первое значение передается таким образом

http://192.168.0.106/ledr?r=105&g=79&b=0&w=0

спасибо за ваши старания, так как я не очень-то понимаю щи вы предлагаете способы решения нет смысла поскольку я немного не понимаю о чем речь.

Gora · November 18, 2017

сижу пилю прошивку для микроконтроллера и заметил что при нажатии кнопки я перехожу на эту страницу http://192.168.0.106/ledr?r=105&g=79&b=0&w=0 вопрос как можно сделать так чтобы после того как мы кликнули по кнопке Сылка отправилась а я остался на начальной странице.

mrnobody · November 19, 2017

Убрал лишний символ в начале, попробуйте еще разок )

https://codepen.io/corvus-007/pen/VryMKr?editors=1011

Наверное из-за того что адрес страницы отличается от адреса на который отправляются данные происходит ошибка. Вы может открыть консоль (клавиша F12) и при изменении ползунков показывается ошибка, что запрос блокируется.

Сделал так, что мы остаемся на странице, но форма отправляется в другом окне.

Gora · November 19, 2017

до сих пор не работает. Я здесь нашел пример передачи данных для моего случая, но разобраться не могу как он работает.

Gora · November 19, 2017

и вот ето строку дописать и норм setTimeout('led()',500);

Sign In

Сылка с переменой

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information