Форум

tracerzzz · #1 (**permalink**) 19.08.2015, 13:47

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
	<title>Вот так вот </title>
</head>
<body>
<style type="text/css">
   #element { 
	width: 800px;
	height: 500px;
    padding: 50px;
    border: solid 5px black; 
    margin: 5% 5%;
	position: relative;	
}
	
   .alert {
    width: 180px;
	height: 150px;
    border: solid 3px black; 
    position: absolute;
	left: 10px;
	top: 400px;
 margin: 5px;
 }
  </style> 
    <div id="element">	 	
<input style="width:70px;height:70px; margin: 1px 700px"; type="image" src="add.png"  name="myButton"  onclick="add()" id=""  />	
	
<script type="text/javascript">

 function add() {
 var image= {
  className : "alert",
  id : "qwe",
  innerHTML:"<img src="1.jpg" style=height:100%; width:100%; >",
  }
}
</script>
</div>
</body>
</html>

Как отобразить объект image в блоке в блоке div?

рони · #2 (**permalink**) 19.08.2015, 13:58

tracerzzz,
и что должно получится?

tracerzzz · #3 (**permalink**) 19.08.2015, 14:12

Что бы отобразить объект с свойствами

.alert {
    width: 180px;
	height: 150px;
    border: solid 3px black; 
    position: absolute;
	left: 10px;
	top: 400px;
 margin: 5px;
 }

В котором будет картинка

innerHTML:"<img src="1.jpg" style=height:100%; width:100%; >",

Нужно что бы при нажатии каждом на кнопку, добавлялся новый объект в блок <div id="element"> который будет отображать картинку.

рони · #4 (**permalink**) 19.08.2015, 14:25

tracerzzz,

вы результат в html напишите того что будет после нажатия.

рони · #5 (**permalink**) 19.08.2015, 14:28

tracerzzz,
может тут чего почитать https://learn.javascript.ru/modifying-document
и так на всякий внутри двойных кавычек идут ординарные

tracerzzz · #6 (**permalink**) 19.08.2015, 14:44

Спасибо, исправил кавычки.
Мне нужно следующее:
Создать объект image, у которого будет метод конструктор, который создаёт объект связанный с HTML элементом element.
Что бы при нажатии на кнопку добавить создавался объект (картинка 1, картинка 2 и т.д.).

Я попробовал сделать так

var div = document.createElement('div');
div.className = "alert";
div.innerHTML:"<img src="1.jpg" style=height:100%; width:100%; >",

Далее что бы отобразить:

document.getElementById("element").appendChild(div);

Визуально получилось.

Но по условию нужно создать свой объект, с методами.

рони · #7 (**permalink**) 19.08.2015, 14:59

tracerzzz,

function add() {
    var image = {
        className: "alert",
        id: "qwe",
        innerHTML: "<img src='1.jpg' style='height:100%; width:100%;' >"
    };
    var div = document.createElement("div");
    for (var k in image) div[k] = image[k];
    document.querySelector("#element").appendChild(div)
};

tracerzzz · #8 (**permalink**) 19.08.2015, 15:33

Спасибо, подскажите пожалуйста если я задаю свойство style.width: "999px",

var image = {
        className: "alert",
        id: "qwe",
        style.width: "999px",
        innerHTML: "<img src='1.jpg' style='height:100%; width:100%;' >"
    };

не работает, как правильно это сделать?

рони · #9 (**permalink**) 19.08.2015, 15:58

tracerzzz,

function forIn(elem, obj) {
    for (var k in obj) typeof obj[k] == "string" ? elem[k] = obj[k] : forIn(elem[k], obj[k]);
    return elem
}

function add() {
    var image = {
        className: "alert",
        id: "qwe",
        innerHTML: "<img src='1.jpg' style='height:100%; width:100%;' >",
        style: {
            width: "999px",
            border: "5px solid red"
        }
    };
    var div = document.createElement("div");
    div = forIn(div, image);
    document.querySelector("#element").appendChild(div)
};

tracerzzz · #10 (**permalink**) 19.08.2015, 16:28

Спасибо большое.

Форум

Справочник

Discord чат

Курсы javascript