Podpisanie pod zmienną tekst inputa - problem

Question

function check_input() {
    var x = document.getElementById("urlinput").innerHTML;
    alert(x);
    if (x == "") {
        document.getElementById("alert-box").innerHTML='There is nothing to shorten';
        alert_box();
    } else {
        shorturl()
    }
}

Mam taki kod, w jaki sposób wpisać treść inputa pod zmienną X?

Gdy zrobiłem jak wyżej zawsze jest pusty i nie wiem co dalej.

 

I drugie pytanko

teraz skrypt sprawdza czy input nie jest pusty

w jaki sposób sprawdzić czy gdzieś w sobie nie ma http lub https?

 

 

Answer 1

1. Przykładowo nadaj inputowi id #testowo i pobierz jego wartość w taki sposób:

let tmp = document.querySelector('#testowo').value;
console.log(tmp)

Ważne, wartość będzie istniała w momencie wysłania formularza! Jeżeli chcesz sprawdzać na bieżąco (to co użytkownik poda) musisz nasłuchiwać odpowiedniego zdarzenia - addEventListener.

2. Jest wiele sposobów, jednym z nich są wyrażenia regularne (RegExp).

Answer 2

Jeśli chcesz pobrać samą wartość pola w input to nie odwołuj się do innrHTML tylko po prostu do właściwości value na pobranej referencji do inputa.

A co do sprawdzenia https to po pierwsze ja bym zrobił na tym value trim(), aby obciąć białe znaki, a po drugie jest kilka metod, w sumie wszystkie je można spotkać, tu masz gotowca, wybierz sobie jaka metoda Ci najbardziej odpowiada do tego problemu:

const value1 = 'https://wp.pl';
const value2 = 'some-text';

value1.startsWith('http');    // true
value2.startsWith('http');    // false

value1.slice(0,4) === 'http'; // true
value2.slice(0,4) === 'http'; // false

/^https?/i.test(value1);      // true
/^https?/i.test(value2);      // false

Regexp jest najbardziej uniwersalny, bo pozwala np. od razu objąć sprawdzenie bez znaczenia na wielkość znaków (flaga "i") co czasami jest przydatne. Zależy w jakim celu robisz tą walidację, jeśli to jakieś sprawdzenie zabezpieczające to warto taki case wziąć pod uwagę (albo użyć toLowerCase na stringu), ale często widuję też w kodach wariant drugi. String.prototype.startsWith jest stosunkowo nową metodą ale jeśli używasz babela do transpilacji to nie powinien to być problem. Także wybierz sobie w zależności od potrzeb i z uwzględnieniem wspieranych środowisk i ustawień Twojego buildera.