Javascript объединить несколько строковых переменных и отобразить в диапазоне - PullRequest
Новая
       2

Javascript объединить несколько строковых переменных и отобразить в диапазоне

0 голосов
/ 10 июля 2020

У меня есть простая страница, которая делает флаер. У меня есть отображение данных, и я застрял в том, чтобы взять три переменные и отобразить их в промежутке для отрыва. Вот что у меня есть на данный момент. Я пробовал несколько разных подходов, пытаясь распечатать заголовок, имя и телефон в div. Я использую прослушиватель с несколькими событиями, чтобы запустить функцию для размещения данных в диапазоне с помощью обработчика getElementsByClassName. Любое направление приветствуется. 

// JavaScript Document

// Fill Flyer text Areas

// Flyer Title
var inputBoxTitle = document.getElementById('title_input');

inputBoxTitle.onkeyup = function(){
    document.getElementById('title').innerHTML = inputBoxTitle.value;
}
// Contact Name
var inputBoxConName = document.getElementById('con_name_input');

inputBoxConName.onkeyup = function(){
    document.getElementById('con_name').innerHTML = inputBoxConName.value;
}
// Contact Email
var inputBoxEmail = document.getElementById('email_input');

inputBoxEmail.onkeyup = function(){
    document.getElementById('email').innerHTML = inputBoxEmail.value;
}
// Contact Phone
var inputBoxPhone = document.getElementById('phone_input');

inputBoxPhone.onkeyup = function(){
    document.getElementById('phone').innerHTML = inputBoxPhone.value;
}
// Animal Name
var inputAnimalName = document.getElementById('name_animal_input');

inputAnimalName.onkeyup = function(){
    document.getElementById('animal_name').innerHTML = inputAnimalName.value;
}
// Lost/Found Date
var inputLostDate = document.getElementById('date_lost_input');
inputLostDate.onkeyup = function(){
    document.getElementById('date_lost').innerHTML = inputLostDate.value;
}

// Lost or Found
var inputLostFound = document.getElementsByName('lost_input');
(function (){
    for(var i = 0; i < inputLostFound.length; i++){
        inputLostFound[i].onclick = function(){
            document.getElementById('lost_found').innerText = this.value;
        }
    }
})();


// Microchipped Radio
var inputMicro = document.getElementsByName('micro_input');
(function (){
    for(var i = 0; i < inputMicro.length; i++){
        inputMicro[i].onclick = function(){
            document.getElementById('micro').innerText = this.value;
        }
    }
})();


// Color
var inputColor = document.getElementById('color_input');

inputColor.onkeyup = function(){
    document.getElementById('color').innerHTML = inputColor.value;
}
// Breed
var inputBreed = document.getElementById('breed_input');

inputBreed.onkeyup = function(){
    document.getElementById('breed').innerHTML = inputBreed.value;
}

// Animal Sex
var inputSex = document.getElementsByName('sex_input');
(function (){
    for(var i = 0; i < inputLostFound.length; i++){
        inputSex[i].onclick = function(){
            document.getElementById('sex').innerText = this.value;
        }
    }
})();

// Description
var inputDescription = document.getElementById('description_input');

inputDescription.onkeyup = function(){
    document.getElementById('description').innerHTML = inputDescription.value;
}
  
// Tear Offs
var res = inputBoxTitle + "<br>" + inputBoxConName + "<br>" + inputBoxPhone;
    $('inputBoxTitle, inputBoxConName, inputBoxPhone').onkeyup, function(){
        document.getElementsByClassName('tear_off_data').innerHTML = document.write(res);
        
    }
.main-row {
  flex-wrap: nowrap;
  word-break: break-all;
}

.column, .rotate {
  border: 1px dashed;
  -webkit-box-flex: 1;
          flex: 1 1 0;
}

.rotate {
  height: 270px;
  white-space: nowrap;
  width: 0;
}
.rotate > div {
  -webkit-transform: translate(0px, 110px) rotate(-90deg);
          transform: translate(0px, 110px) rotate(-90deg);
}
.rotate > div > span {
  border-bottom: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.js" integrity="sha512-nxKp6INemMtUWHV+BToAOXm2ZV4+LCc/sw+4j2fyVJG088hHf7Rt/h8qCYT7bTsEtqkDCXo6sbtFlkro3Zo3HA==" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 
</head>
<body>
    <!----          Start Data Input for Flyer          ---->
    <div class="container" style="margin-bottom: 10px;">
    <div class="jumbotron"><h1>San Antonio Pet Rescue</h1>
        <p>locating lost and found/stray, dogs and cats</p>
        </div>
        <div class="row">
           <div class="col-sm">Insert Your Title Here<input type="text" id="title_input" name="title_input" placeholder="Title"></div>
           <div class="col-sm">Contact Name<input type="text" id="con_name_input" name="con_name_input" placeholder="Contact Name"></div>
           <div class="col-sm">Contact Phone<input class="phone_us" type="tel" id="phone_input" name="phone_input" placeholder="xxx-xxx-xxxx"></div>
           <div  class="col-sm">Contact Email<input type="email" id="email_input" name="email_input" placeholder="Contact Email"></div>
        </div>
        <div class="row">
         <div  class="col-sm">Animal Name if Known<input type="text" id="name_animal_input" name="name_animal_input" placeholder="ex: Duke, Gracie, Ben, Unknown"></div>
        <div class="col-sm">Date Found/Lost<input type="date" id="date_lost_input" name="date_lost_input"></div>
         <div class="col-sm">Predominate Color<input type="text" id="color_input" name="color" placeholder="ex: Black, Rust, Black and White, Dark Brown..."></div>
         <div class="col-sm">Breed of Animal<input type="text" id="breed_input" name="breed_input" placeholder="ex: Calico, Doberman, Apaloossa..."></div>
             </div>
            <div class="row">
         <div class="col-3 col-sm">Lost/Found<input type="radio" id="lost" name="lost_input" value="Lost">Lost&nbsp;<input type="radio" id="found" name="lost_input" value="Found">Found</div>
         <fieldset class="form-group">
    <div class="row">
      <div><legend class="col-form-label col-sm-2 pt-0">Sex</legend></div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="sex_input" id="male" value="Male" checked>
          <label class="form-check-label" for="male">
            Male
          </label>
        </div>
        <div class="col-2 form-check">
          <input class="form-check-input" type="radio" name="sex_input" id="female" value="Female">
          <label class="form-check-label" for="female">
            Female
          </label>
        </div>
      </div>
    </div>
  </fieldset>
         <div class="col-2 col-sm">Microchipped<input type="radio" id="micro_input" name="micro_input" value="Yes">Yes&nbsp;<input type="radio" name="micro" value="No">No&nbsp;<input type="radio" name="micro" value="Unknown">Unknown</div>
                </div>
        <div class="row">
           
           <div class="col-sm col-6"><label>Add description here</label><textarea id="description_input" name="description_input" placeholder="Identifying Markings and Features, limit 316 characters including spaces
(Note: For found animals, you may want to withold specific details in order to screen for the animal's owner)" wrap="virtual" rows="10" cols="45"></textarea></div>
        <div class="col-sm col-5"><label>Select Your Picture Here</label><input type="file" /></div>
            </div>
        <div class="row">
        <div class="col-sm col-12" style="background-color: #e9ecef">Program sponsored by, Bruce Osborne, your JBGoodwin REALTORS for home sales & purchases and Apartment Leases.
For every home purchased or apartment leased through your referrals to Bruce, he will donate $50 to the pet rescue of your choice.</div>
        </div>
</div> <!----          Container, Main          ---->
    <!----          Start Flyer Rendering          ---->
    <div class="container" style="border: dashed; height: 1200px; width: 1571px">
        <div class="row">
        <div class="h2 text-center" style="margin: 10px;">SA Pet Rescue</div>
        </div>
        <div class="row">
            <div class="h5 text-center" style="margin: 10px;">locating lost and found/stray, dogs and cats</div>
        </div>
        <div class="container-md h1 text-center" id="title"></div>
        <div class="container-md h1 text-center" id="preview"><img id="myImg" src="#" alt="your image here" width="700" height="400"></div> <!----    Display image    ---->
        <div class="row container-md">
        <div class="col-4 container-md h3 text-center" id="con_name"></div> 
        <div class="col-4 container-md h3 text-center" id="phone"></div>
        <div class="col-4 container-md h3 text-center" id="email"></div>
        </div>
        <div class="row">
        <div class="col-2 container-md h5 text-center" id="animal_name"></div>
        <div class="col-2 container-md h5 text-center">Microchipped&nbsp;<span id="micro"></span></div>
        <div class="col-2 container-md h5 text-center" id="sex"></div>
        <div class="col-2 container-md h5 text-center" id="breed"></div>
        <div class="col-2 container-md h5 text-center" id="color"></div>
        <div class="col-2 container-md h5 text-center"><span id="lost_found"></span>&nbsp;On&nbsp;<span id="date_lost"></span></div>
        </div>
        <div class="container-md h3 text-center" id="description"></div>
        <div class="container-fluid">
            <div class="col-xs-9">
            <div class="row main-row">
            <div class="rotate">
                <div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
            <div class="rotate">
                <div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
            <div class="rotate">
                <div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
            <div class="rotate">
                <div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
            <div class="rotate">
                <div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
            <div class="rotate">
                <div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
            <div class="rotate">
                <div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
            <div class="rotate">
                <div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
            <div class="rotate">
                <div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
            </div>
            </div>
        </div>
      </div>
    <div class="container my-5"></div>
</body>
    <script src="flyer-text.js"></script>
    <script type="text/jscript">
    window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
    if (this.files && this.files[0]) {
      var img = document.querySelector('img'); // $('img')[0]
      img.src = URL.createObjectURL(this.files[0]); // set src to file url
    }
  });
});
    </script>
</html>

1 Ответ

1 голос
/ 10 июля 2020

Вам не хватает .value после переменных элемента.

Вам также не нужно вызывать document.write ().

Раздел «Отрывки» должен быть: 

var res = inputBoxTitle.value + "<br>" + inputBoxConName.value + "<br>" + inputBoxPhone.value;
    $('inputBoxTitle, inputBoxConName, inputBoxPhone').onkeyup, function(){
        document.getElementsByClassName('tear_off_data').innerHTML = res;
    }

EDIT: Я также заметил, что вы объявляете циклы внутри отдельных функций. Вам не нужно этого делать!

Пример: 

(function (){
    for(var i = 0; i < inputLostFound.length; i++){
        inputLostFound[i].onclick = function(){
            document.getElementById('lost_found').innerText = this.value;
        }
    }
})();

Можно просто записать как: 

for(var i = 0; i < inputLostFound.length; i++){
    inputLostFound[i].onclick = function(){
        document.getElementById('lost_found').innerText = this.value;
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...