Получить img src из поля ввода в div - PullRequest
Новая
       19

Получить img src из поля ввода в div

2 голосов
/ 27 марта 2012

Я сам учу себя CSS HTML, а теперь и Javascript.

Идея этого небольшого проекта заключается в том, чтобы пользователь вводил URL-адрес для img, когда пользователь нажимает кнопку, после чего img должен быть вставлен в новый <div> на странице.

Я пытался часами искать в stackoverflow, но я, честно говоря, не понимаю, как я могу использовать другие ответы на свой собственный код. большая часть кода CSS и HTML уже сделана, мне просто нужна помощь с частью javascript, если это вообще возможно.

вот что у меня есть: (извините, это немного)

HTML-код: 

<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />  
<input type="button" value="Get Feed" onclick="GetFeed()"/>
</form>

Javascript код: 

<script type="text/javascript">

function GetFeed(imgForm){

var imgSrc = document.getElementById('src').value;    


}
</script>

Кто-нибудь может мне помочь? Я не знаю, куда идти отсюда .. по крайней мере, дайте мне несколько советов, как я могу получить значение из поля TXT и добавить новый <div><img src="user input from txt box should go here"/></div> за каждый раз, когда вставляет unser и новый URL для img?

Спасибо заранее.

Ответы [ 3 ]

1 голос
/ 27 марта 2012

Я думаю, в соответствии с вашими потребностями how can i get the value from the txt box and add a new <div><img src="user input from txt box should go here"/></div> вам нужно это

HTML 

<form>
  <input type="text" id="txt">
  <input id="btn" type="button" value="Get Image" onclick="getImg();" />
</form>
<div id="images"></div>

JS (входит в ваши метки головы) 

function getImg(){
    var url=document.getElementById('txt').value;
    var div=document.createElement('div');
    var img=document.createElement('img');
    img.src=url;
    div.appendChild(img);
    document.getElementById('images').appendChild(div);
    return false;
}

Вот пример .

0 голосов
/ 27 марта 2012

Примерно так создастся div с элементом изображения, src которого равен тексту в поле ввода.Затем он добавляет div в конец страницы. 

<html>
    <head>
        <script type="text/javascript">
            function GetFeed(form){
            var imgSrc = form.elements["inputbox1"].value;  
            var imgDiv = document.createElement('div');
            imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>"
            document.body.appendChild(imgDiv);
            }
        </script>
    </head>
    <body>
        <form name="imgForm">
            enter URL:
            <input type="text" name="inputbox1" value="src" />  
            <input type="button" value="Get Feed" onclick="GetFeed(this.form)"/>
        </form>
    </body>
</html>
0 голосов
/ 27 марта 2012

Вы должны добавить атрибут id к вашему <input>: 

<input type="text" name="inputbox1" id="box1" value="src" />

... затем настройте свой код: 

var imgSrc = document.getElementById('box1').value;

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

http://www.w3schools.com/jsref/dom_obj_image.asp

...