Tworzenie 2 wartości tekstowych w 1 pozycji listy

OK, mam problem z wyświetlaniem dwóch wartości tekstowych w obrębie tego samego elementu listy (jeden <input>, jeden <textarea>) Czy to możliwe?Tworzenie 2 wartości tekstowych w 1 pozycji listy

Próbuję utworzyć prostą aplikację dziennik/dziennik, w której można dodać tytuł (opcjonalnie) i treść samego wpisu, naciśnij przycisk prześlij i poproś o utworzenie elementu listy wyświetlającego treść.

HTML:

<html> 
    <head> 
    <title>WriteUp</title> 
    </head> 

<body> 

<div id="textWrap"> 
     <div class="border"> 
     <h1>Start Writing</h1><br /> 
     <input id="title" placeholder="Title (Optional)"> 
     <textarea rows="4" cols="50" type="text" id="entry" maxlength="500" placeholder="Add stuff..."></textarea><br /> 
     <button id="add">Submit</button> 
     <button id="removeAll">Remove All</button> 
     <ul id="list"></ul> 
     </div><!--end of border div--> 
    </div><!--end of textWrap--> 

    </body> 
</html>

JS:

//js to add text entries 
var ul = document.getElementById('list'), 
    removeAll = document.getElementById('removeAll'), 
    add = document.getElementById('add'); 

//make something happen when clicking on 'submit' 
add.onclick = function(){ 
    addLi(ul); 
    document.getElementById("titleHead"); 
}; 

//function for adding items 
function addLi(targetUl){ 
    var inputText = document.getElementById('entry').value, 
     li = document.createElement('li'), 
     textNode = document.createTextNode(inputText + ''), 
     removeButton = document.createElement('button'); 

    if (inputText.split(' ').join(' ').length === 0) { 
    //check for empty inputs 
    alert ('No input'); 
    return false; 
    } 


    removeButton.className = 'removeMe'; //add class to button for CSS 
    removeButton.innerHTML = 'Remove'; //add text to the remove button 
    removeButton.setAttribute('onclick', 'removeMe(this);'); 

    li.appendChild(textNode); 
    li.appendChild(removeButton); 

    targetUl.appendChild(li); 
} 

//function to remove entries 
function removeMe(item){ 
    var parent = item.parentElement; 
    parent.parentElement.removeChild(parent); 
} 

removeAll.onclick = function(){ 
    ul.innerHTML = ''; 
};

demo: http://codepen.io/Zancrash/pen/rxMxxQ (ignorować kątowe logowanie rzeczy)

Źródło

2015-12-24 Zancrash

Oto javascript

//js to add text entries 
 
var ul = document.getElementById('list'), 
 
    removeAll = document.getElementById('removeAll'), 
 
    add = document.getElementById('add'); 
 

 
//make something happen when clicking on 'submit' 
 
add.onclick = function(){ 
 
    addLi(ul); 
 
    document.getElementById("titleHead"); 
 
}; 
 

 
//function for adding items 
 
function addLi(targetUl){ 
 
    var inputText = document.getElementById('entry').value, 
 
    header= document.getElementById('title').value, 
 
     li = document.createElement('li'), 
 
     content=document.createElement('div'), 
 
     title=document.createElement('div'), 
 
    // textNode = document.createTextNode(inputText + ''+), 
 
     removeButton = document.createElement('button'); 
 
\t \t \t content.setAttribute('class','content') 
 
     title.setAttribute('class','title') 
 
     content.innerHTML=inputText; 
 
     title.innerHTML=header; 
 
    if (inputText.split(' ').join(' ').length === 0) { 
 
    //check for empty inputs 
 
    alert ('No input'); 
 
    return false; 
 
    } 
 

 

 
    removeButton.className = 'removeMe'; //add class to button for CSS 
 
    removeButton.innerHTML = 'Remove'; //add text to the remove button 
 
    removeButton.setAttribute('onclick', 'removeMe(this);'); 
 

 
    li.appendChild(title); 
 
    li.appendChild(content); 
 
    li.appendChild(removeButton); 
 

 
    targetUl.appendChild(li); 
 
} 
 

 
//function to remove entries 
 
function removeMe(item){ 
 
    var parent = item.parentElement; 
 
    parent.parentElement.removeChild(parent); 
 
} 
 

 
removeAll.onclick = function(){ 
 
    ul.innerHTML = ''; 
 
};

body { 
 
    margin: 0; 
 
} 
 
*{ 
 
    font-family: Gotham Book, Arial, Helvetica, Sans-serif; 
 
} 
 
#navbar { 
 
    background-color: #f1f1f1; 
 
    text-align: center; 
 
} 
 
#navbaritems { 
 
    margin: 0 auto; 
 
} 
 
#navbaritems ul { 
 
    padding: 0; 
 
    width: 100%; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    display: inline; 
 
    position: relative; 
 
    font-size: 0; 
 
} 
 
#navbaritems ul li { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
    color: #000; 
 
    position: relative; 
 
} 
 
#navbaritems ul li ul { 
 
    width: 100%; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 6vh; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    text-align: center; 
 
    -webkit-transiton: opacity 0.2s; 
 
    -moz-transition: opacity 0.2s; 
 
    -ms-transition: opacity 0.2s; 
 
    -o-transition: opacity 0.2s; 
 
    -transition: opacity 0.2s; 
 
} 
 
#navbaritems ul li ul li { 
 
    background-color: #f1f1f1; 
 
    display: block; 
 
} 
 
#navbaritems ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
#navbaritems ul li:hover { 
 
    -o-transition: 1s; 
 
    -ms-transition: 1s; 
 
    -moz-transition: 1s; 
 
    -webkit-transition: 1s; 
 
    transition: 1s; 
 
    width: 22%; 
 
} 
 
#navbaritems ul li ul li:hover { 
 
    -o-transition: 1s; 
 
    -ms-transition: 1s; 
 
    -moz-transition: 1s; 
 
    -webkit-transition: 1s; 
 
    transition: 1s; 
 
    width: 100%; 
 
} 
 
#navbaritems ul li a { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
    font-size: 1vw; 
 
    display: block; 
 
    height: 4vh; 
 
    line-height: 4vh; 
 
    color: #808080; 
 
    text-decoration: none; 
 
    padding: 1vh; 
 
    margin: 0; 
 
} 
 
#navbaritems ul li a:hover:not(.active) { 
 
    background-color: #82c986; 
 
    color: #ffffff; 
 
    -o-transition: .3s; 
 
    -ms-transition: .3s; 
 
    -moz-transition: .3s; 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 
#navbaritems ul li a.active { 
 
    color: #ffffff; 
 
    background-color: #4CAF50; 
 
} 
 
.title { 
 
    display:inline-block; 
 
color:blue; 
 
font-weight:bold; 
 
text-decoration:underline; 
 
}

<title>WriteUp</title> 
 
    </head> 
 

 
<body> 
 

 
<div id="textWrap"> 
 
     <div class="border"> 
 
     <h1>Start Writing</h1><br /> 
 
     <input id="title" placeholder="Title (Optional)"> 
 
     <textarea rows="4" cols="50" type="text" id="entry" maxlength="500" placeholder="Add stuff..."></textarea><br /> 
 
     <button id="add">Submit</button> 
 
     <button id="removeAll">Remove All</button> 
 
     <ul id="list"></ul> 
 
     </div><!--end of border div--> 
 
    </div><!--end of textWrap--> 
 

 
    </body> 
 
</html>

Źródło

2015-12-24 03:26:38 repzero

Jestem całkiem pewien, że to jest to, czego szukasz, ja nieznacznie zmodyfikowano linię zaczynającą się od textNode, a także dodano dodatkową zmienną dla titleText. Następnie kontynuuj całą pozostałą część kodu tak jak jest.

function addLi(targetUl){ 
    var inputText = document.getElementById('entry').value, 
     titleText = document.getElementById('title').value, 
     li = document.createElement('li'), 
     textNode = document.createTextNode(titleText + ' - ' + inputText + ''), 
     removeButton = document.createElement('button');

Źródło

2015-12-24 02:13:31 Bradley4

można po prostu przejść do wartości formularza, a następnie złączyć je

;(function(){ 
 
    
 
    "use strict"; 
 
    
 
    var form = document.getElementById('f'); 
 
    var title = document.getElementById('title'); 
 
    var body = document.getElementById('body'); 
 
    var targetUl = document.getElementById('posts'); 
 
    
 
    btn.addEventListener('click',function(ev){ 
 

 
    var newli = document.createElement('li'); 
 
    newli.innerText = title.value + ' && ' + body.value; 
 
    targetUl.appendChild(newli); 
 
    
 
    }); 
 
    
 
})();

form { 
 
    position: relative; 
 
} 
 
label, input, textarea, button { 
 
    float: left; 
 
} 
 
label { 
 
    clear: left; 
 
} 
 
input, textarea { 
 
    clear: right; 
 
} 
 
button, ul, hr { 
 
    clear: both; 
 
} 
 
label { 
 
    width: 100px; 
 
}

<form id="f"> 
 
    <label for="title">Title</label> 
 
    <input type="text" name="title" id="title" /> 
 
    <label for="body">Body</label> 
 
    <textarea name="body" id="body"></textarea> 
 
    <button type="button" id="btn">add to list</button> 
 
</form> 
 

 
<hr /> 
 

 
<ul id="posts" />

Źródło

2015-12-24 02:16:45

Tworzenie 2 wartości tekstowych w 1 pozycji listy

Odpowiedz

Powiązane problemy