CODEWITHSUNDEEP
javascriptinput
Alfio Federico Di Pinto
Alfio Federico Di Pinto

Reputation: 35

Trying to dynamically change a paragraph by using the form fields, getting <undefined> when calling the function

I am trying to dynamically change a paragraph by using the form fields, unfortunately I am failing as I am getting undefined when calling the functions. I can get the input value when logging them to the console, but I am kind of stucked.

Also, I am pretty sure this code is far from being optimal...

Any leads would be much appreciated!

HTML code:

const greetingDisplay = document.getElementById("greeting-display")
const form = document.getElementById("form");
const recipient = document
  .getElementById("recipient-input")
  .addEventListener("input", getRecipient);
const sender = document
  .getElementById("sender-input")
  .addEventListener("input", getSender);
const message = document
  .getElementById("greeting-select")
  .addEventListener("input", getMessage);;




function getRecipient(){
 const recipient = document.getElementById("recipient-input");
  const recipientValue = recipient.value;

  console.log(recipientValue);
}

let lover1 = getRecipient()


function getSender(){
  const sender = document.getElementById("sender-input");
  const senderValue = sender.value;

  console.log(senderValue);
}

let lover2 = getSender()

function getMessage(){
  const message = document.getElementById("greeting-select");
  const messageValue = message.value;

  console.log(messageValue);
}

let loveMessage = getMessage()

function writeGreeting() {
  const greeting = `${lover1} ${loveMessage} ${lover2}`;
  greetingDisplay.textContent = greeting;
}
  

writeGreeting()
:root {
  --yellow: #FBF3AB;
  --light-pink: #F0B9DD;
  --lavender: #C7B9FF;
  --deep-pink: #F04C86;
  --raisin: #2B283A;
  --white: #fff;
}

*, html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--lavender);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2em;
    font-family: 'Karla', sans-serif;
}

.card {
    min-width: 270px;
    border-radius: 5px;
    background: var(--yellow);
    font-size: 24px;    
    padding: 1em;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.card p {
   font-weight: 700;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

form * {
   padding: .5em;
   font-size: 1.3rem;
   font-family: inherit;       
}

form label {
   font-weight: 700;
}

form *:not(label) {
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    border-radius: 5px;
    border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
          <div class="card" id="card">
            <p id="greeting-display">Greeting will go here</p>
          </div>

          <form id="form">
            <label for="recipient-input">To:</label>
            <input type="text" id="recipient-input" name="recipient-input">
            <br>
            <label for="greeting-select">Select greeting:</label>
            <select id="greeting-select">
              <option value="">--Select greeting--</option>
              <option value="I choo choo choose you! 🚂">"I choo choo choose you! 🚂"</option>
              <option value="You are my sunshine! 🌞">"You are my sunshine! 🌞"</option>
              <option value="Happy Valentine's! 💘">"Happy Valentine's! 💘",</option>
            </select>
            <br>
            <label for="sender-input">From:</label>
            <input type="text" id="sender-input" name="sender-input">
          </form>


  <script src="app.js"></script>
</body>
</html>

Upvotes: 0

Views: 187

Answers (1)

mykaf
mykaf

Reputation: 1388

Your functions getRecipient() and getSender() don't return a value. Add return statements.

function getRecipient(){
 const recipient = document.getElementById("recipient-input");
  const recipientValue = recipient.value;

  console.log(recipientValue);
  return recipientValue;
}

let lover1 = getRecipient()


function getSender(){
  const sender = document.getElementById("sender-input");
  const senderValue = sender.value;

  console.log(senderValue);
  return senderValue;
}

Upvotes: 1

Related Questions